思维导图究竟是什么？如何在微信小程序中创建它？本文将详细阐述如何运用f6工具在微信小程序中制作思维导图，期待对各位读者有所裨益！
思维导图，亦称脑图、心智地图、头脑风暴图、心智图、灵感触发图、概念地图或思维地图，本质上是一种以图像形式组织信息的图表。它通过一个核心关键词或观念，以放射状线条将所有相关的词汇、观念、任务或其他关联内容连接起来。它能够通过多样化的手法来展现人们的思维，包括但不限于命题式、直观形象化、构建体系以及分类法等。《维基百科》中广泛运用这些方法，它们在研究、管理、解决难题以及政策制定等领域发挥着重要作用。
托尼·博赞，这位英国的专家，在1970年代提出了思维导图这一辅助思考的工具。它以目标主题为核心节点，向外不断扩展，建立联系，同时进行分解和深入探究，最终构建起一张完整的树状结构图。从具体操作的角度来看，思维导图可视化了探索的过程，详尽地记录了每一次关联的成果。这种结构更贴近人们的思维习惯，而且最终的图像也让我们对主题有了更深刻的感知和全面的认识。
思维导图之所以应用范围极广，是因为它侧重于思维过程，而我们的日常行为无不与思考紧密相连。无论是进行总结归纳、报告展示还是头脑风暴，思维导图都能发挥重要作用。制作过程中，简单的纸笔便足够使用，同时还有众多在线和独立的应用软件可供选择，以支持思维导图的绘制。当我们的产品需要呈现围绕某一主题的多层次关联信息时，思维导图便成为了一种理想的选择。F6在微信小程序中绘制思维导图十分便捷，正如图中所示，具备此类需求的同学不妨尝试一下。此外，我们还推荐相关的小程序开发学习资源。【学习资源推荐：小程序开发教程】
F6中如何绘制
本节示例代码位于f6.antv./zh/docs/exa…地址，现已对外公布，如感兴趣，欢迎查阅。
支付宝中
首先安装
data.js
export default {
id: 'Modeling Methods',
children: [
{
id: 'Classification',
children: [
{
标识为：'逻辑回归'。
},
{
线性判别分析，标识符为：'Linear Discriminant Analysis'。
},
{
id: 'Rules',
},
{
标识为“决策树”。
},
{
id: 'Naive Bayes',
},
{
识别码：'K最近邻'算法
},
{
标识：概率神经网络
},
{
标识符为“支持向量机”。
},
],
},
{
id: 'Consensus',
children: [
{
编号：'模型多样性'
children: [
{
标识：不同初始化方式，
},
{
该标识符表示：参数选择存在差异。
},
{
标识：不同架构
},
{
编号：'多样化的建模方式'
},
{
标识为“不同的训练集”。
},
{
标识符为“具有不同特性集合”。
},
],
},
{
id: 'Methods',
children: [
{
分类器选择标识：
},
{
该分类器融合技术标识为：Classifier fusion。
},
],
},
{
id: 'Common',
children: [
{
id: 'Bagging',
},
{
id: 'Boosting',
},
{
id: 'AdaBoost',
},
],
},
],
},
{
id: 'Regression',
children: [
{
编号：'多元线性回归'
},
{
该方法的标识为：部分最小二乘法。
},
{
编号：多层前馈神经网络
},
{
该网络模型标识为：通用回归神经网络。
},
{
标识符为“支持向量回归”。
},
],
},
],
};
.json
{
"defaultTitle": "mindMap",
"usingComponents": {
"f6-canvas"这一组件，其依赖项为"@antv/f6-alipay/es/container/container"。
}
}
.js
import F6 from '@antv/f6';
引入TreeGraph模块，该模块源自'@antv/f6/dist/extends/graph/treeGraph'路径。
引入wrapContext函数，该函数来源于'../../../common/utils/context'路径下的模块。
import data from './data';
/**
* 脑图-自节点自动两侧分布
*/
Page({
canvas: null,
ctx: null,
renderer:空字符串，代表mini、mini-native等类型，F6功能所必需，用于标识当前运行环境
isCanvasInit未为真，表示canvas尚未完成初始化。
graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 2,
forceMini: false,
},
onLoad() {
// 注册自定义树，节点等
F6对'TreeGraph'进行注册，注册对象为TreeGraph。
// 同步获取window的宽高
通过调用my.getSystemInfoSync()方法，成功获取了系统的窗口宽度、窗口高度以及像素比，分别为windowWidth、windowHeight和pixelRatio。
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio,
});
},
/**
* 初始化cnavas回调，缓存获得的context
* @param {*} ctx 绘图context
* @param {*} rect 宽高信息
本参数为canvas图形对象，当render模式设置为mini时，该对象可能为空。
*/
在函数体内执行初始化操作，对上下文进行操作，设定矩形区域，绘制到画布上，并使用渲染器。
this.isCanvasInit = true;
此上下文对象等于对原上下文对象进行封装后的结果。
this.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/**
* canvas派发的事件，转派给graph实例
*/
handleTouch(e) {
若存在此图，则执行此图的事件发射操作。
},
updateChart() {
从this.data对象中解构出width、height和pixelRatio三个属性。
// 创建F6实例
此图结构对象=newF6的树形图实例，配置为{
context: this.ctx,
渲染器：本对象的renderer属性，即this.renderer。
width,
height,
pixelRatio,
fitView: true,
modes: {
default: [
{
类型设定为：折叠展开式设计。
当发生改变时，执行一个函数，该函数接收两个参数：一个是项目信息，另一个是折叠状态。
item对象调用了getModel方法，从而获取了相应的model。
模型对象的状态设置为已折叠；模型对象的折叠属性被设定为折叠模式。
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
类型设定为：'水平立方型'。
},
layout: {
type: 'mindmap',
direction: 'H',
定义方法：getHeight，方法名为getHeight，实现获取高度的函数。
return 16;
},
定义一个名为getWidth的函数，该函数没有参数。
return 16;
},
定义函数getVGap，该函数无参数。
return 10;
},
定义一个名为getHGap的函数，该函数用于获取水平间距。
return 50;
},
},
});
let centerX = 0;
在绘制图形时，通过该函数对图中的节点进行操作：this.graph.node(nodeFunction)。
若节点标识符等于“建模方法”，则{
centerX = node.x;
}
在设置position的值时（考虑到ESlint对嵌套的三元表达式的限制，因此将其独立出来进行书写），
设定变量position_value的值为空。
若节点存在子节点，并且子节点数量超过零，则执行。
position_value设定为'left'；
若节点x坐标大于中心点x坐标，则将位置值设为“右侧”。
否则，设定position_value的值为'left'。
return {
label: node.id,
labelCfg: {
offset: 5,
设定：位置值为position_value,
},
};
});
this.graph.data(data);
this.graph.render();
this.graph.fitView();
},
});
.axml
微信中
首先安装
npm install @antv/f6-wx -S
鉴于微信对npm包的支持有限，我们特别拆分了@antv/f6-wx，旨在为用户提供操作上的便捷。
data.js同上
.json
{
"defaultTitle": "脑图",
"usingComponents": {
"该配置项f6-canvas对应的是@antv/f6-wx/canvas/canvas模块。"
}
}
.wxml
.js
import F6 from '@antv/f6-wx';
引入TreeGraph模块，源自于'@antv/f6-wx/extends/graph/treeGraph'。
import data from './data';
/**
* 脑图-自节点自动两侧分布
*/
Page({
canvas: null,
ctx: null,
renderer: '', // mini、mini-native等，F6需要，标记环境
isCanvasInit: false, // canvas是否准备好了
graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 1,
forceMini: false,
},
onLoad() {
// 注册自定义树，节点等
F6.registerGraph('TreeGraph', TreeGraph);
// 同步获取window的宽高
通过调用wx.getSystemInfoSync()函数，成功获取了当前窗口的宽度、高度以及像素密度，分别赋值给windowWidth、windowHeight和pixelRatio这三个变量。
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) {
从事件详情中提取出ctx、rect、canvas和renderer这四个对象。
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: '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禁止嵌套的三元表达，所以单独提取出来写）
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();
},
});
欢迎讨论
如果您对思维导图或图形化展示感兴趣，欢迎添加我的微信，进而加入我们的微信群进行交流讨论。