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

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

什么是思维导图？思维导图是20世纪70年代由英国托尼·博赞提出的一种辅助思维工具。以目标主题为中心的节点继续向外延伸、分解和探索，最终形成一个完整的树形图。从具体的操作过程来看，也可以理解为探索过程的可视化，它完整地记录了每个关联的结果。这种形式更符合人们的思维方式，最终的画面也让我们对主题有了更具体感和整体性的理解。

正是因为思维导图的重点是思考，而我们的正常活动都离不开思考，所以思维导图有着非常广泛的使用场景。例如总结、演示、头脑风暴等。只需要笔和纸来实现，当然，有大量的在线和独立的应用程序可以支持绘图。如果我们的产品需要围绕一个主题展示多层相关信息，我们可以使用思维导图的形式。F6可以在一个小程序中轻松绘制出脑图，如上图的效果。有相关需求的同学值得一试。【相关学习推荐:小程序开发教程】

如何在F6画一个示范例子可以参考f6.antv.vision/zh/docs/exa...本节中的代码是开源的，如果您感兴趣，可以查看。

支付宝github.com/antvis/F6/t...微信github.com/antvis/F6/t...先安装支付宝。

NPM install @ antv/F6 @ antv/f6-支付宝-Sdata.js

导出默认{ id:& amp；#39;建模方法与技术。#39;，孩子:【{ id:& amp；#39;分类和。#39;，孩子:【{ id:& amp；#39;逻辑回归与分析。#39;，}，{ id:& amp；#39;线性判别分析与应用。#39;，}，{ id:& amp；#39;规则&amp。#39;，}，{ id:& amp；#39;决策树和。#39;，}，{ id:& amp；#39;朴素贝叶斯和贝叶斯定理。#39;，}，{ id:& amp；#39;k最近邻& amp#39;，}，{ id:& amp；#39;概率神经网络及应用。#39;，}，{ id:& amp；#39;支持向量机与神经网络。#39;，}，】，}，{ id:& amp；#39;共识与共识。#39;，孩子:【{ id:& amp；#39;模型多样性和。#39;，孩子:【{ id:& amp；#39;不同的初始化& amp#39;，}，{ id:& amp；#39;不同参数选择& amp#39;，}，{ id:& amp；#39;不同的架构& amp#39;，}，{ id:& amp；#39;不同的建模方法和。#39;，}，{ id:& amp；#39;不同的训练集和。#39;，}，{ id:& amp；#39;不同的功能集& amp#39;，}，】，}，{ id:& amp；#39;方法与技巧。#39;，孩子:【{ id:& amp；#39;分类器选择与应用。#39;，}，{ id:& amp；#39;分类器融合& amp#39;，}，】，}，{ id:& amp；#39;普通& amp#39;，孩子:【{ id:& amp；#39;装袋和包装。#39;，}，{ id:& amp；#39;助推&amp。#39;，}，{ id:& amp；#39;AdaBoost & amp#39;，}，】，}，】，】，}，{ id:& amp；#39;回归& amp#39;，孩子:【{ id:& amp；#39;多元线性回归与分析。#39;，}，{ id:& amp；#39;偏最小二乘法及应用。#39;，}，{ id:& amp；#39;多层前馈神经网络及应用。#39;，}，{ id:& amp；#39;通用回归神经网络及应用。#39;，}，{ id:& amp；#39;支持向量回归与预测。#39;, }, ], }, ],};索引. json

{ & quot默认标题& quot:& quot思维导图，& quot使用组件& quot:{ & quotf6-帆布& quot:& quot@ antv/f6-支付宝/es/container/container & quot；}}index.js

从& amp；amp；进口F6#39;@ antv/F6 & amp；#39;；从& amp#39;@ antv/F6/dist/extends/graph/treeGraph & amp；#39;；从& amp#39;../../../common/utils/context & amp；#39;；从导入数据& amp#39;。/data & amp；#39;；/* * *脑图-自节点自动双边分布*/page（{ canvas:null，CTX: null，渲染器:&；#39;& amp#39;，// mini、mini -原生等。，F6需要标记环境是否为CanvasInit: false，// canvas已准备好graph: null，data: {width: 375，height: 600，pixel ratio: 2，Forcefini: false，}，onload（）{//注册自定义树、节点等。F6 . register graph（&；#39;树状图& amp#39;，TreeGraph）；//同步获取窗口的宽度和高度const {windowwidth，windowheight，pixel ratio } = my . getsysteminfosync（）；this . setdata（{ width:window width，height: windowHeight，pixelRatio，}）；}，/* * *初始化cnavas回调，并缓存获取的上下文* @param {*} ctx绘图上下文* @param {*}矩形宽度和高度信息* @param {*}画布对象。呈现为迷你时为Null * @ param {*}无论渲染器使用canvas 1.0还是canvas 2.0，mini | mini -native */handle init（CTX，矩形，画布，渲染器）{ this.iscanvasinit = truethis . CTX = wrap context（CTX）；this.renderer = rendererthis.canvas =画布；this . update chart（）；}，/* * * canvas分发的事件转发到graph实例*/handle touch（e）{ this . graph &；& ampthis . graph . emit event（e）；}，update chart（）{ const { width，height，pixelRatio } = this.data//创建F6实例this . graph = new F6 . treegraph（{ context:this . CTX，renderer: this.renderer，width，height，pixel ratio，fitView: true，modes:{ default:【{ type:& amp；#39;折叠-扩展和扩展。#39;，onChange:function onChange（item，collapsed）{ const model = item . get model（）；model.collapsed =已折叠；返回true}，}，& amp#39;drag -帆布& amp#39;，& amp#39;zoom -帆布& amp#39;，】，}，defaultNode: { size: 26，锚点:【【0，0.5】，【1，0.5】，】，}，default edge:{ type:& amp；#39;立方-水平& amp#39;，}，布局:{ type:& amp；#39;思维导图& amp#39;，方向:& amp#39;H & amp#39;，getHeight:函数getHeight（）{ return 16；}，getWidth:function getWidth（）{ return 16；}，getVGap:函数getVGap（）{ return 10；}，getHGap:函数geth gap（）{ return 50；}, }, });设centerX = 0；this . graph . node（function（node）{ if（node . id = = = & amp；#39;建模方法与技术。#39;）{ centerX = node.x}//position的值（因为ESlint禁止嵌套三元表达式，所以单独提取并写入）let position _ value = nullif（node . children & amp；& ampnode . children . length & gt；0）{ position _ value = & amp；#39;左&amp。#39;；} else if（node . x & gt；centex）position _ value = & amp；#39;右与右。#39;；否则position _ value = & amp#39;左&amp。#39;；return { label: node.id，labelCfg: { offset: 5，position: position_value，}，}；});this.graph.data（数据）；this . graph . render（）；this . graph . fit view（）；},});index.axml

& ltf6-画布宽度= & quot{ { width } } & quot高度= & quot{ { height } } & quotforceMini = & quot{ { forceMini } } & quotpixelRatio = & quot{ { pixelRatio } } & quotonTouchEvent = & quot手感& quotonInit = & quothandleInit&quot& gt& lt/f6-画布& gt首先在微信中安装

Npm install @antv/f6-wx-s @ antv/F6-wx由于微信对NPM软件包不太友好，我们重新打包了@ antv/F6-wx以帮助用户简化操作。

Data.js同上

索引. json

{ & quot默认标题& quot:& quot脑图”，& quot使用组件& quot:{ & quotf6-帆布& quot:& quot@ antv/f6-wx/canvas/canvas & quot；}}index.wxml

& ltf6-画布宽度= & quot{ { width } } & quot高度= & quot{ { height } } & quotforceMini = & quot{ { forceMini } } & quotpixelRatio = & quot{ { pixelRatio } } & quotbind:onTouchEvent = & quot；手感& quotbind:on init = & quot；handleInit&quot& gt& lt/f6-画布& gt索引. js

从& amp；amp；进口F6#39;@ antv/f6-wx & amp；#39;；从& amp#39;@ antv/f6-wx/extends/graph/tree graph & amp；#39;；从导入数据& amp#39;。/data & amp；#39;；/* * *脑图-自节点自动双边分布*/page（{ canvas:null，CTX: null，渲染器:&；#39;& amp#39;，// mini、mini -原生等。，F6需要标记环境是否为CanvasInit: false，// canvas已准备好graph: null，data: {width: 375，height: 600，pixel ratio: 1，Forcefini: false，}，onload（）{//注册自定义树、节点等。F6 . register graph（&；#39;树状图& amp#39;，TreeGraph）；//同步获取窗口的宽度和高度const {windowwidth，windowheight，pixel ratio } = wx . getsysteminfosync（）；this . setdata（{ width:window width，height: windowHeight，// pixelRatio，}）；}，/* * *初始化cnavas回调，并缓存获取的上下文* @param {*} ctx绘图上下文* @param {*}矩形宽度和高度信息* @param {*}画布对象。Null * @ param {*}当渲染为mini时，无论渲染器使用canvas 1.0还是canvas 2.0，mini | mini -native */handle init（event）{ const { CTX，矩形，画布，渲染器} = event。细节这个。iscanvasinit = truethis.ctx = ctxthis.renderer = rendererthis.canvas =画布；this . update chart（）；}，/* * * canvas分发的事件转发到graph实例*/handle touch（e）{ this . graph &；& ampthis . graph . emit event（e . detail）；}，update chart（）{ const { width，height，pixelRatio } = this.data//创建F6实例this . graph = new F6 . treegraph（{ context:this . CTX，renderer: this.renderer，width，height，pixel ratio，fitView: true，modes:{ default:【{ type:& amp；#39;折叠-扩展和扩展。#39;，onChange:function onChange（item，collapsed）{ const model = item . get model（）；model.collapsed =已折叠；返回true}，}，& amp#39;drag -帆布& amp#39;，& amp#39;zoom -帆布& amp#39;，】，}，defaultNode: { size: 26，锚点:【【0，0.5】，【1，0.5】，】，}，default edge:{ type:& amp；#39;立方-水平& amp#39;，}，布局:{ type:& amp；#39;思维导图& amp#39;，方向:& amp#39;H & amp#39;，getHeight:函数getHeight（）{ return 16；}，getWidth:function getWidth（）{ return 16；}，getVGap:函数getVGap（）{ return 10；}，getHGap:函数geth gap（）{ return 50；}, }, });设centerX = 0；this . graph . node（function（node）{ if（node . id = = = & amp；#39;建模方法与技术。#39;）{ centerX = node.x}//position的值（因为ESlint禁止嵌套三元表达式，所以单独提取并写入）let position _ value = nullif（node . children & amp；& ampnode . children . length & gt；0）{ position _ value = & amp；#39;左&amp。#39;；} else if（node . x & gt；centex）position _ value = & amp；#39;右与右。#39;；否则position _ value = & amp#39;左&amp。#39;；return { label: node.id，labelCfg: { offset: 5，position: position_value，}，}；});this.graph.data（数据）；this . graph . render（）；this . graph . fit view（）；},});欢迎讨论。如果您对思维导图或图形可视化感兴趣，可以将我的微信openwayne添加到我们的微信群讨论中。

更多编程相关知识请访问:编程入门！！

这几篇文章你可能也喜欢：

• 小程序开发的具体流程是什么（小程序开发入门教程）
• 小程序调用百度云接口实现人脸识别（人脸识别小程序百度云下载）
• 微信小程序开发需要掌握哪些技术（微信小程序开发需要哪些技能）？
• 如何将外部css引入小程序(如何将外部js引入微信小程序)
• 小程序开发的难点是什么（开发小程序难吗）

本文由主机参考刊发，转载请注明：什么是思维导图？如何在小程序中使用F6绘制思维导图？ https://zhujicankao.com/118199.html