思维导图究竟是什么以及如何在小程序中用 F6 绘制

why 710 2024-06-25

什么是思维导图？怎么在小程序中绘制思维导图？下面本篇文章给大家介绍一下使用f6在小程序中绘制思维导图的方法，希望对大家有所帮助！

什么是思维导图？怎么使用F6在小程序中绘制思维导图？

什么是思维导图？

思维导图（英语：mind map），又称脑图、心智地图、头脑风暴图、心智图、灵感触发图、概念地图、或思维地图，是一种用图像整理信息的图解。它用一个中央关键词或想法以辐射线形连接所有的代表字词、想法、任务或其它关联项目。它可以利用不同的方式去表现人们的想法，如引题式、可见形象化式、建构系统式和分类式。它普遍地用作在研究、组织、解决问题和政策制定中。《维基百科》

思维导图是由英国的托尼·博赞于1970年代提出的一种辅助思考工具。以目标主题为中心节点不断向外延展关联，不断分解和探索，最终形成一张完整的树状图。从具体的操作过程来看，也可以理解为对探索过程的可视化，完整记录了每一次关联的结果。这种形式更加符合人的思考方式，最后的图也让我们对主题更有体感和整体的了解。

正因为思维导图的关注点在于思考，而我们的正常活动离不开思考，所以思维导图有非常广泛的使用场景。比如总结归纳、报告演示、头脑风暴等。实施起来只需要纸笔足以，当然也有丰富的在线、独立应用可以支持到图的制作。如果我们的产品需要展示围绕一个主题的多层关联信息的时候，便可以采用思维导图的形式。F6可以很方便地在小程序中绘制脑图，比如上图的效果，有相关需求的同学值得一试。

F6中如何绘制

演示示例可以参考f6.antv.vision/zh/docs/exa…本节代码已经开源，感兴趣可以查看

支付宝 github.com/antvis/F6/t…
微信 github.com/antvis/F6/t…

支付宝中

首先安装

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

data.js

100

101

102

103

104

105

106

107

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

index.json

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

index.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

import F6 from &#39;@antv/f6&#39;;
import TreeGraph from &#39;@antv/f6/dist/extends/graph/treeGraph&#39;;
import { wrapContext } from &#39;../../../common/utils/context&#39;;
 
import data from &#39;./data&#39;;
 
/**
 * 脑图-自节点自动两侧分布
 */
 
Page({
  canvas: null,
  ctx: null,
  renderer: &#39;&#39;, // mini、mini-native等，F6需要，标记环境
  isCanvasInit: false, // canvas是否准备好了
  graph: null,
 
  data: {
    width: 375,
    height: 600,
    pixelRatio: 2,
    forceMini: false,
  },
 
  onLoad() {
    // 注册自定义树，节点等
    F6.registerGraph(&#39;TreeGraph&#39;, TreeGraph);
 
    // 同步获取window的宽高
    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
 
    this.setData({
      width: windowWidth,
      height: windowHeight,
      pixelRatio,
    });
  },
 
  /**
   * 初始化cnavas回调，缓存获得的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派发的事件，转派给graph实例
   */
  handleTouch(e) {
    this.graph && this.graph.emitEvent(e);
  },
 
  updateChart() {
    const { width, height, pixelRatio } = this.data;
 
    // 创建F6实例
    this.graph = new F6.TreeGraph({
      context: this.ctx,
      renderer: this.renderer,
      width,
      height,
      pixelRatio,
      fitView: true,
      modes: {
        default: [
          {
            type: &#39;collapse-expand&#39;,
            onChange: function onChange(item, collapsed) {
              const model = item.getModel();
              model.collapsed = collapsed;
              return true;
            },
          },
          &#39;drag-canvas&#39;,
          &#39;zoom-canvas&#39;,
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: &#39;cubic-horizontal&#39;,
      },
      layout: {
        type: &#39;mindmap&#39;,
        direction: &#39;H&#39;,
        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 === &#39;Modeling Methods&#39;) {
        centerX = node.x;
      }
 
      // position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）
      let position_value = null;
      if (node.children && node.children.length > 0) {
        position_value = &#39;left&#39;;
      } else if (node.x > centerX) position_value = &#39;right&#39;;
      else position_value = &#39;left&#39;;
 
      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>

微信中

首先安装

1	`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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

import F6 from &#39;@antv/f6-wx&#39;;
import TreeGraph from &#39;@antv/f6-wx/extends/graph/treeGraph&#39;;
 
 
import data from &#39;./data&#39;;
 
/**
 * 脑图-自节点自动两侧分布
 */
 
Page({
  canvas: null,
  ctx: null,
  renderer: &#39;&#39;, // mini、mini-native等，F6需要，标记环境
  isCanvasInit: false, // canvas是否准备好了
  graph: null,
 
  data: {
    width: 375,
    height: 600,
    pixelRatio: 1,
    forceMini: false,
  },
 
  onLoad() {
    // 注册自定义树，节点等
    F6.registerGraph(&#39;TreeGraph&#39;, TreeGraph);
 
    // 同步获取window的宽高
    const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();
 
    this.setData({
      width: windowWidth,
      height: windowHeight,
      // pixelRatio,
    });
  },
 
  /**
   * 初始化cnavas回调，缓存获得的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派发的事件，转派给graph实例
   */
  handleTouch(e) {
    this.graph && this.graph.emitEvent(e.detail);
  },
 
  updateChart() {
    const { width, height, pixelRatio } = this.data;
 
    // 创建F6实例
    this.graph = new F6.TreeGraph({
      context: this.ctx,
      renderer: this.renderer,
      width,
      height,
      pixelRatio,
      fitView: true,
      modes: {
        default: [
          {
            type: &#39;collapse-expand&#39;,
            onChange: function onChange(item, collapsed) {
              const model = item.getModel();
              model.collapsed = collapsed;
              return true;
            },
          },
          &#39;drag-canvas&#39;,
          &#39;zoom-canvas&#39;,
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: &#39;cubic-horizontal&#39;,
      },
      layout: {
        type: &#39;mindmap&#39;,
        direction: &#39;H&#39;,
        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 === &#39;Modeling Methods&#39;) {
        centerX = node.x;
      }
 
      // position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）
      let position_value = null;
      if (node.children && node.children.length > 0) {
        position_value = &#39;left&#39;;
      } else if (node.x > centerX) position_value = &#39;right&#39;;
      else position_value = &#39;left&#39;;
 
      return {
        label: node.id,
        labelCfg: {
          offset: 5,
          position: position_value,
        },
      };
    });
 
    this.graph.data(data);
    this.graph.render();
    this.graph.fitView();
  },
});

标签：程序思维小程序示例方法

暂时没有评论，来抢沙发吧~

思维导图究竟是什么以及如何在小程序中用 F6 绘制

什么是思维导图？

F6中如何绘制

支付宝中

微信中

最近发表

更多内容

推荐文章

解决方案

热评文章