小程序中如何繪制思維導(dǎo)圖詳解

更新時間：2021年10月13日 14:30:25 作者：AntCredit

小程序相信大家應(yīng)該都很熟悉了,對于小程序的整個運營的方法,很多運營都比較關(guān)注,今天希望通過一個思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于小程序中如何繪制思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下

什么是思維導(dǎo)圖？

思維導(dǎo)圖（英語：mind map），又稱腦圖、心智地圖、頭腦風(fēng)暴圖、心智圖、靈感觸發(fā)圖、概念地圖、或思維地圖，是一種用圖像整理信息的圖解。它用一個中央關(guān)鍵詞或想法以輻射線形連接所有的代表字詞、想法、任務(wù)或其它關(guān)聯(lián)項目。它可以利用不同的方式去表現(xiàn)人們的想法，如引題式、可見形象化式、建構(gòu)系統(tǒng)式和分類式。它普遍地用作在研究、組織、解決問題和政策制定中?！毒S基百科》

思維導(dǎo)圖是由英國的托尼·博贊于1970年代提出的一種輔助思考工具。以目標(biāo)主題為中心節(jié)點不斷向外延展關(guān)聯(lián)，不斷分解和探索，最終形成一張完整的樹狀圖。從具體的操作過程來看，也可以理解為對探索過程的可視化，完整記錄了每一次關(guān)聯(lián)的結(jié)果。這種形式更加符合人的思考方式，最后的圖也讓我們對主題更有體感和整體的了解。

正因為思維導(dǎo)圖的關(guān)注點在于思考，而我們的正?；顒与x不開思考，所以思維導(dǎo)圖有非常廣泛的使用場景。比如總結(jié)歸納、報告演示、頭腦風(fēng)暴等。實施起來只需要紙筆足以，當(dāng)然也有豐富的在線、獨立應(yīng)用可以支持到圖的制作。如果我們的產(chǎn)品需要展示圍繞一個主題的多層關(guān)聯(lián)信息的時候，便可以采用思維導(dǎo)圖的形式。F6可以很方便地在小程序中繪制腦圖，比如上圖的效果，有相關(guān)需求的同學(xué)值得一試。

F6中如何繪制

演示示例可以參考f6.antv.vision/zh/docs/exa…

本節(jié)代碼已經(jīng)開源，感興趣可以查看

支付寶 github.com/antvis/F6/t…

微信 github.com/antvis/F6/t…

支付寶中

首先安裝

npm install @antv/f6 @antv/f6-alipay -S

data.js

export default {
  id: 'Modeling Methods',
  children: [
    {
      id: 'Classification',
      children: [
        {
          id: 'Logistic regression',
        },
        {
          id: 'Linear discriminant analysis',
        },
        {
          id: 'Rules',
        },
        {
          id: 'Decision trees',
        },
        {
          id: 'Naive Bayes',
        },
        {
          id: 'K nearest neighbor',
        },
        {
          id: 'Probabilistic neural network',
        },
        {
          id: 'Support vector machine',
        },
      ],
    },
    {
      id: 'Consensus',
      children: [
        {
          id: 'Models diversity',
          children: [
            {
              id: 'Different initializations',
            },
            {
              id: 'Different parameter choices',
            },
            {
              id: 'Different architectures',
            },
            {
              id: 'Different modeling methods',
            },
            {
              id: 'Different training sets',
            },
            {
              id: 'Different feature sets',
            },
          ],
        },
        {
          id: 'Methods',
          children: [
            {
              id: 'Classifier selection',
            },
            {
              id: 'Classifier fusion',
            },
          ],
        },
        {
          id: 'Common',
          children: [
            {
              id: 'Bagging',
            },
            {
              id: 'Boosting',
            },
            {
              id: 'AdaBoost',
            },
          ],
        },
      ],
    },
    {
      id: 'Regression',
      children: [
        {
          id: 'Multiple linear regression',
        },
        {
          id: 'Partial least squares',
        },
        {
          id: 'Multi-layer feedforward neural network',
        },
        {
          id: 'General regression neural network',
        },
        {
          id: 'Support vector regression',
        },
      ],
    },
  ],
};

index.json

{
  "defaultTitle": "mindMap",
  "usingComponents": {
    "f6-canvas": "@antv/f6-alipay/es/container/container"
  }
}

index.js

import F6 from '@antv/f6';
import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';
import { wrapContext } from '../../../common/utils/context';

import data from './data';

/**
 * 腦圖-自節(jié)點自動兩側(cè)分布
 */

Page({
  canvas: null,
  ctx: null,
  renderer: '', // mini、mini-native等，F(xiàn)6需要，標(biāo)記環(huán)境
  isCanvasInit: false, // canvas是否準(zhǔn)備好了
  graph: null,

  data: {
    width: 375,
    height: 600,
    pixelRatio: 2,
    forceMini: false,
  },

  onLoad() {
    // 注冊自定義樹，節(jié)點等
    F6.registerGraph('TreeGraph', TreeGraph);

    // 同步獲取window的寬高
    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();

    this.setData({
      width: windowWidth,
      height: windowHeight,
      pixelRatio,
    });
  },

  /**
   * 初始化cnavas回調(diào)，緩存獲得的context
   * @param {*} ctx 繪圖context
   * @param {*} rect 寬高信息
   * @param {*} canvas canvas對象，在render為mini時為null
   * @param {*} renderer 使用canvas 1.0還是canvas 2.0，mini | mini-native
   */
  handleInit(ctx, rect, canvas, renderer) {
    this.isCanvasInit = true;
    this.ctx = wrapContext(ctx);
    this.renderer = renderer;
    this.canvas = canvas;
    this.updateChart();
  },

  /**
   * canvas派發(fā)的事件，轉(zhuǎn)派給graph實例
   */
  handleTouch(e) {
    this.graph && this.graph.emitEvent(e);
  },

  updateChart() {
    const { width, height, pixelRatio } = this.data;

    // 創(chuàng)建F6實例
    this.graph = new F6.TreeGraph({
      context: this.ctx,
      renderer: this.renderer,
      width,
      height,
      pixelRatio,
      fitView: true,
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const model = item.getModel();
              model.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 50;
        },
      },
    });
    let centerX = 0;
    this.graph.node(function(node) {
      if (node.id === 'Modeling Methods') {
        centerX = node.x;
      }

      // position的取值（由于ESlint禁止嵌套的三元表達(dá)，所以單獨提取出來寫）
      let position_value = null;
      if (node.children && node.children.length > 0) {
        position_value = 'left';
      } else if (node.x > centerX) position_value = 'right';
      else position_value = 'left';

      return {
        label: node.id,
        labelCfg: {
          offset: 5,
          position: position_value,
        },
      };
    });

    this.graph.data(data);
    this.graph.render();
    this.graph.fitView();
  },
});

index.axml

<f6-canvas
  width="{{width}}"
  height="{{height}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  onTouchEvent="handleTouch"
  onInit="handleInit"
></f6-canvas>

微信中

首先安裝

npm install @antv/f6-wx -S

@antv/f6-wx 由于微信對npm包不是很友好，所以我們分裝了 @antv/f6-wx 幫助用戶簡化操作。

data.js

同上

index.json

{
  "defaultTitle": "腦圖",
  "usingComponents": {
    "f6-canvas": "@antv/f6-wx/canvas/canvas"
  }
}

index.wxml

<f6-canvas
  width="{{width}}"
  height="{{height}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  bind:onTouchEvent="handleTouch"
  bind:onInit="handleInit"
></f6-canvas>

index.js

import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';


import data from './data';

/**
 * 腦圖-自節(jié)點自動兩側(cè)分布
 */

Page({
  canvas: null,
  ctx: null,
  renderer: '', // mini、mini-native等，F(xiàn)6需要，標(biāo)記環(huán)境
  isCanvasInit: false, // canvas是否準(zhǔn)備好了
  graph: null,

  data: {
    width: 375,
    height: 600,
    pixelRatio: 1,
    forceMini: false,
  },

  onLoad() {
    // 注冊自定義樹，節(jié)點等
    F6.registerGraph('TreeGraph', TreeGraph);

    // 同步獲取window的寬高
    const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();

    this.setData({
      width: windowWidth,
      height: windowHeight,
      // pixelRatio,
    });
  },

  /**
   * 初始化cnavas回調(diào)，緩存獲得的context
   * @param {*} ctx 繪圖context
   * @param {*} rect 寬高信息
   * @param {*} canvas canvas對象，在render為mini時為null
   * @param {*} renderer 使用canvas 1.0還是canvas 2.0，mini | mini-native
   */
  handleInit(event) {
    const {ctx, rect, canvas, renderer} = event.detail
    this.isCanvasInit = true;
    this.ctx = ctx;
    this.renderer = renderer;
    this.canvas = canvas;
    this.updateChart();
  },

  /**
   * canvas派發(fā)的事件，轉(zhuǎn)派給graph實例
   */
  handleTouch(e) {
    this.graph && this.graph.emitEvent(e.detail);
  },

  updateChart() {
    const { width, height, pixelRatio } = this.data;

    // 創(chuàng)建F6實例
    this.graph = new F6.TreeGraph({
      context: this.ctx,
      renderer: this.renderer,
      width,
      height,
      pixelRatio,
      fitView: true,
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const model = item.getModel();
              model.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 50;
        },
      },
    });
    let centerX = 0;
    this.graph.node(function(node) {
      if (node.id === 'Modeling Methods') {
        centerX = node.x;
      }

      // position的取值（由于ESlint禁止嵌套的三元表達(dá)，所以單獨提取出來寫）
      let position_value = null;
      if (node.children && node.children.length > 0) {
        position_value = 'left';
      } else if (node.x > centerX) position_value = 'right';
      else position_value = 'left';

      return {
        label: node.id,
        labelCfg: {
          offset: 5,
          position: position_value,
        },
      };
    });

    this.graph.data(data);
    this.graph.render();
    this.graph.fitView();
  },
});