什么是思维导图？怎么在小程序中绘制思维导图？下面本篇文章给大家介绍一下使用f6在小程序中绘制思维导图的方法，希望对大家有所帮助！
什么是思维导图？
思维导图（英语：mind map），又称脑图、心智地图、源码网点我wcqh.cn头脑风暴图、心智图、灵感触发图、概念地图、或思维地图，是一种用图像整理信息的图解。它用一个中央关键词或想法以辐射线形连接所有的代表字词、想法、任务或其它关联项目。它可以利用不同的方式去表现人们的想法，源码网点我wcqh.cn如引题式、可见形象化式、建构系统式和分类式。它普遍地用作在研究、组织、解决问题和政策制定中。《维基百科》思维导图是由英国的托尼·博赞于1970年代提出的一种辅助思考工具。以目标主题为中心节点不断向外延源码网点我wcqh.cn展关联，不断分解和探索，最终形成一张完整的树状图。从具体的操作过程来看，也可以理解为对探索过程的可视化，完整记录了每一次关联的结果。这种形式更加符合人的思考方式，最后的图也让我们对主题更有体感和整体的源码网点我wcqh.cn了解。
正因为思维导图的关注点在于思考，而我们的正常活动离不开思考，所以思维导图有非常广泛的使用场景。比如总结归纳、报告演示、头脑风暴等。实施起来只需要纸笔足以，当然也有丰富的在线、独立应用可以支持到图源码网点我wcqh.cn的制作。如果我们的产品需要展示围绕一个主题的多层关联信息的时候，便可以采用思维导图的形式。F6可以很方便地在小程序中绘制脑图，比如上图的效果，有相关需求的同学值得一试。【相关学习推荐：小程序开发教程】源码网点我wcqh.cn
F6中如何绘制
演示示例可以参考f6.antv.vision/zh/docs/exa…本节代码已经开源，感兴趣可以查看
支付宝 github.com/antvis/F6/t… 微信 github.com/ant源码网点我wcqh.cnvis/F6/t…支付宝中
首先安装
1
npm install @antv/f6 @antv/f6-alipay -S
data.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
export default {
id源码网点我wcqh.cn: 'Modeling Methods',
children: [
{
id: 'Classification',
children: [
{
id: 'Logistic 源码网点我wcqh.cnregression',
},
{
id: 'Linear discriminant analysis',
},
{
id: 'Rules',
},
{
id: 'Dec源码网点我wcqh.cnision trees',
},
{
id: 'Naive Bayes',
},
{
id: 'K nearest neighbor',
},
{
id: 'Probab源码网点我wcqh.cnilistic neural network',
},
{
id: 'Support vector machine',
},
],
},
{
id: 'Consensus',
c源码网点我wcqh.cnhildren: [
{
id: 'Models diversity',
children: [
{
id: 'Different initializations',
},
{
id:源码网点我wcqh.cn 'Different parameter choices',
},
{
id: 'Different architectures',
},
{
id: 'Differen源码网点我wcqh.cnt modeling methods',
},
{
id: 'Different training sets',
},
{
id: 'Different feature sets&源码网点我wcqh.cn#39;,
},
],
},
{
id: 'Methods',
children: [
{
id: 'Classifier selection',
},
{
id: 'Classif源码网点我wcqh.cnier fusion',
},
],
},
{
id: 'Common',
children: [
{
id: 'Bagging',
},
{
id: 'Boosting&#源码网点我wcqh.cn39;,
},
{
id: 'AdaBoost',
},
],
},
],
},
{
id: 'Regression',
children: [
{
id: 'Multiple line源码网点我wcqh.cnar regression',
},
{
id: 'Partial least squares',
},
{
id: 'Multi-layer feedforward neural源码网点我wcqh.cn network',
},
{
id: 'General regression neural network',
},
{
id: 'Support vector regressi源码网点我wcqh.cnon',
},
],
},
],
};
index.json
1
2
3
4
5
6
{
“defaultTitle”: “mindMap”,
“usingComponents”: {
“f6-canvas”: “源码网点我wcqh.cn@antv/f6-alipay/es/container/container”
}
}
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118源码网点我wcqh.cn
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import F6 from '@antv/f6';
imp源码网点我wcqh.cnort TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';
import { wrapContext } from '源码网点我wcqh.cn../../../common/utils/context';
import data from './data';
/**
* 脑图-自节点自动两侧分布
*/
Page({
canvas源码网点我wcqh.cn: null,
ctx: null,
renderer: '', // mini、mini-native等，F6需要，标记环境
isCanvasInit: false, // canvas是源码网点我wcqh.cn否准备好了
graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 2,
forceMini: false,
},
onLoad() {
// 注册自定义树，源码网点我wcqh.cn节点等
F6.registerGraph('TreeGraph', TreeGraph);
// 同步获取window的宽高
const { windowWidth, windowHeigh源码网点我wcqh.cnt, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixel源码网点我wcqh.cnRatio,
});
},
/**
* 初始化cnavas回调，缓存获得的context
* @param {*} ctx 绘图context
* @param {*} rect 宽高信息
* @param {*}源码网点我wcqh.cn canvas canvas对象，在render为mini时为null
* @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native源码网点我wcqh.cn
*/
handleInit(ctx, rect, canvas, renderer) {
this.isCanvasInit = true;
this.ctx = wrapContext(ctx);
this源码网点我wcqh.cn.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/**
* canvas派发的事件，转派给graph实例
*/
handleTo源码网点我wcqh.cnuch(e) {
this.graph && this.graph.emitEvent(e);
},
updateChart() {
const { width, height, pixelRatio } =源码网点我wcqh.cn this.data;
// 创建F6实例
this.graph = new F6.TreeGraph({
context: this.ctx,
renderer: this.renderer,
width,
h源码网点我wcqh.cneight,
pixelRatio,
fitView: true,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function源码网点我wcqh.cn onChange(item, collapsed) {
const model = item.getModel();
model.collapsed = collapsed;
return true;
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],
[1,源码网点我wcqh.cn 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
},
layout: {
type: 'mindmap',
directio源码网点我wcqh.cnn: 'H',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16源码网点我wcqh.cn;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 50;
},
},
});
let center源码网点我wcqh.cnX = 0;
this.graph.node(function(node) {
if (node.id === 'Modeling Methods') {
centerX = node.x;源码网点我wcqh.cn
}
// position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）
let position_value = null;
if (node.children && node.chil源码网点我wcqh.cndren.length > 0) {
position_value = 'left';
} else if (node.x > centerX) position_value = '源码网点我wcqh.cn;right';
else position_value = 'left';
return {
label: node.id,
labelCfg: {
offset: 5,
positio源码网点我wcqh.cnn: position_value,
},
};
});
this.graph.data(data);
this.graph.render();
this.graph.fitView();
},
});
in源码网点我wcqh.cndex.axml
1
2
3
4
5
6
7
8
<f6-canvas
width=”{{width}}”
height=”{{height}}”
forceMini=”{{forceMini}}”
pixelRatio=”{源码网点我wcqh.cn{pixelRatio}}”
onTouchEvent=”handleTouch”
onInit=”handleInit”
></f6-canvas>
微信中
首先安装
@antv/f6-wx 由于微信对npm包不是很友好，所以我们分装了 @antv/f6-wx 帮助用户简化操作。
data.js 同上
index.源码网点我wcqh.cnjson
1
2
3
4
5
6
{
“defaultTitle”: “脑图”,
“usingComponents”: {
“f6-canvas”: “@antv/f6-wx/canvas/canvas”
}
}
i源码网点我wcqh.cnndex.wxml
1
2
3
4
5
6
7
8
<f6-canvas
width=”{{width}}”
height=”{{height}}”
forceMini=”{{forceMini}}”
pixelRatio=”源码网点我wcqh.cn{{pixelRatio}}”
bind:onTouchEvent=”handleTouch”
bind:onInit=”handleInit”
></f6-canvas>
index.js
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104源码网点我wcqh.cn
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
1源码网点我wcqh.cn38
139
140
import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/tr源码网点我wcqh.cneeGraph';
import data from './data';
/**
* 脑图-自节点自动两侧分布
*/
Page({
canvas: null,
ctx: null,
rende源码网点我wcqh.cnrer: '', // mini、mini-native等，F6需要，标记环境
isCanvasInit: false, // canvas是否准备好了
graph: null,
data:源码网点我wcqh.cn {
width: 375,
height: 600,
pixelRatio: 1,
forceMini: false,
},
onLoad() {
// 注册自定义树，节点等
F6.registerGraph(&#源码网点我wcqh.cn39;TreeGraph', TreeGraph);
// 同步获取window的宽高
const { windowWidth, windowHeight, pixelRatio } = wx.g源码网点我wcqh.cnetSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
// pixelRatio,
});
},
/**
* 初始化源码网点我wcqh.cncnavas回调，缓存获得的context
* @param {*} ctx 绘图context
* @param {*} rect 宽高信息
* @param {*} canvas canvas对象，在r源码网点我wcqh.cnender为mini时为null
* @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native
*/
handleInit(event)源码网点我wcqh.cn {
const {ctx, rect, canvas, renderer} = event.detail
this.isCanvasInit = true;
this.ctx = ctx;
this.ren源码网点我wcqh.cnderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/**
* canvas派发的事件，转派给graph实例
*/
handleTouch(源码网点我wcqh.cne) {
this.graph && this.graph.emitEvent(e.detail);
},
updateChart() {
const { width, height, pixelRatio 源码网点我wcqh.cn} = this.data;
// 创建F6实例
this.graph = new F6.TreeGraph({
context: this.ctx,
renderer: this.renderer,
widt源码网点我wcqh.cnh,
height,
pixelRatio,
fitView: true,
modes: {
default: [
{
type: 'collapse-expand',
onChange: funct源码网点我wcqh.cnion onChange(item, collapsed) {
const model = item.getModel();
model.collapsed = collapsed;
return true源码网点我wcqh.cn;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],源码网点我wcqh.cn
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
},
layout: {
type: 'mindmap',
direc源码网点我wcqh.cntion: 'H',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return源码网点我wcqh.cn 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 50;
},
},
});
let cen源码网点我wcqh.cnterX = 0;
this.graph.node(function(node) {
if (node.id === 'Modeling Methods') {
centerX = node源码网点我wcqh.cn.x;
}
// position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）
let position_value = null;
if (node.children && node.c源码网点我wcqh.cnhildren.length > 0) {
position_value = 'left';
} else if (node.x > centerX) position_value = &源码网点我wcqh.cn#39;right';
else position_value = 'left';
return {
label: node.id,
labelCfg: {
offset: 5,
posi源码网点我wcqh.cntion: position_value,
},
};
});
this.graph.data(data);
this.graph.render();
this.graph.fitView();
},
});
欢迎讨论
对于思维导图，或者图可视化感兴趣，都可以添加我的微信 openwayne 进入我们的微信群讨论。
更多编程相关知识，请访问：编程入门！！
以上就是什么是思维导图？怎么使用F6在小程序中绘制思维导源码网点我wcqh.cn图？的详细内容，更多请关注php中文网其它相关文章！
会员专属
暂无评论内容