什么是思维导图？如何在小程序中使用F6绘制思维导图？(F的思维导图怎么画)

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

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

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

如何画出f6.antv.vision/zh/docs/exa在F6的演示例子可以参考…本节代码已经开源，有兴趣可以去查一下。

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

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

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

{ 默认标题 : 思维导图， 使用组件 :{ f6-canvas ；: @ antv/f6-支付宝/es/container/container ；} }索引. js

从 # 39；@ antv/F6 # 39；；从 # 39；导入树形图；@ antv/F6/dist/extends/graph/tree graph # 39；；从 # 39；导入{ wrapContext };../../../common/utils/context # 39；；从 # 39；。/data # 39；；/* * *脑图-从节点自动双边分布*/page ({canvas: null，CTX: null，渲染器: # 39；'、// mini、mini-native等。、F6需要、标记环境是否isCanvasInit: false、// canvas就绪graph: null、data: {width: 375、height: 600、pixel ratio: 2、Force: false、}、onload(){//注册自定义树、节点等。F6 . register graph( # 39；树形图 # 39；，TreeGraph)；//同步获取窗口const {windowwidth，windowheight，pixel ratio } = my . getsysteminfosync()的宽度和高度；this . setdata({ width:window width，height: windowHeight，pixelRatio，})；}，/* * *初始化cnavas回调，缓存获取的context * @param {*} ctx绘制context * @param {*} rect宽度和高度信息* @param {*} canvas canvas对象，Null * @ param {*}渲染器为mini时，渲染器使用canvas 1.0还是canvas 2.0，mini | mini -native */handle init(CTX，rect，canvas，renderer){ this . iscanvasinit = true；this . CTX = wrap context(CTX)；this.renderer = rendererthis.canvas =画布；this . update chart()；}，/* * * canvas分发的事件转发给graph instance */handle touch(e){ this . graph ；this . graph . emit event(e)；}，updateChart() { 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: # 39；折叠-扩展 # 39；，onChange: function onChange(item，collapsed){ const model = item . get model()；model.collapsed = collapsed返回true}, }, 'drag -canvas # 39；, 'zoom -canvas # 39；，]，}，defaultNode: { size: 26，锚点:[ [0，0.5]，[1，0.5]，]，}，default edge:{ type: # 39；立方-水平 # 39；，}，布局:{ type: # 39；思维导图 # 39；，方向: # 39；H # 39，getHeight:函数get height(){ return 16；}，getWidth:函数getWidth(){ return 16；}，getVGap:函数getVGap(){ return 10；}，getHGap:函数geth gap(){ return 50；}, }, });设centex = 0；this . graph . node(function(node){ if(node . id = = = # 39；建模方法 # 39；){ centerX = node.x}//position的值(因为ESlint禁止嵌套的三进制表达式，所以单独提取写)让position _ value = nullif(node . children ； node . children . length gt；0){ position _ value = # 39；左 # 39；；} else if(node . x gt；centex)position _ value = # 39；对 # 39；；else position _ value = # 39左 # 39；；return { label: node.id，labelCfg: { offset: 5，position: position_value，}，}；});this.graph.data(数据)；this . graph . render()；this . graph . fit view()；},});index.axml

ltf6-画布宽度= { { width } } height = { { height } } forceMini = { { forceMini } } pixelRatio = { { pixelRatio } } onTouchEvent = handleTouch onInit = handleInit gt lt/f6-canvas gt；先装微信。

NP install @antv/f6-wx-s @ antv/F6-wx因为微信对npm包不是很友好，所以我们单独打包了@ antv/F6-wx，帮助用户简化操作。

Data.js同上

索引. json

{ 默认标题 : 大脑”、 使用组件 :{ f6-canvas ；: @ antv/f6-wx/canvas/canvas ；}}index.wxml

ltf6-画布宽度= { { width } } height = { { height } } forceMini = { { forceMini } } pixelRatio = { { pixelRatio } } bind:onTouchEvent = ；handleTouch bind:on init = ；handleInit gt lt/f6-canvas gt；索引. js

从 # 39；@ antv/f6-wx # 39；；从 # 39；导入树形图；@ antv/f6-wx/extends/graph/tree graph # 39；；从 # 39；。/data # 39；；/* * *脑图-从节点自动双边分布*/page ({canvas: null，CTX: null，渲染器: # 39；'、// mini、mini-native等。、F6需要、标记环境是否isCanvasInit: false、// canvas就绪graph: null、data: {width: 375、height: 600、pixel ratio: 1、Force: false、}、onload(){//注册自定义树、节点等。F6 . register graph( # 39；树形图 # 39；，TreeGraph)；//同步获取窗口宽度和高度const {windowwidth，windowheight，pixel ratio } = wx . getsysteminfosync()；this . setdata({ width:window width，height: windowHeight，// pixelRatio，})；}，/* * *初始化cnavas回调，缓存获取的上下文* @param {*} ctx绘制上下文* @param {*} rect宽度和高度信息* @param {*} canvas画布对象，Null * @ param {*}渲染器为mini时，渲染器使用canvas 1.0还是canvas 2.0，mini | mini -native */handle init(event){ const { CTX，rect，canvas，renderer } = event . detailthis . iscanvasinit = true；this.ctx = ctxthis.renderer = rendererthis.canvas =画布；this . update chart()；}，/* * * canvas分发的事件转发给graph instance */handle touch(e){ this . graph ；this . graph . emit event(e . detail)；}，updateChart() { 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: # 39；折叠-扩展 # 39；，onChange: function onChange(item，collapsed){ const model = item . get model()；model.collapsed = collapsed返回true}, }, 'drag -canvas # 39；, 'zoom -canvas # 39；，]，}，defaultNode: { size: 26，锚点:[ [0，0.5]，[1，0.5]，]，}，default edge:{ type: # 39；立方-水平 # 39；，}，布局:{ type: # 39；思维导图 # 39；，方向: # 39；H # 39，getHeight:函数get height(){ return 16；}，getWidth:函数getWidth(){ return 16；}，getVGap:函数getVGap(){ return 10；}，getHGap:函数geth gap(){ return 50；}, }, });设centex = 0；this . graph . node(function(node){ if(node . id = = = # 39；建模方法 # 39；){ centerX = node.x}//position的值(因为ESlint禁止嵌套的三进制表达式，所以单独提取写)让position _ value = nullif(node . children ； node . children . length gt；0){ position _ value = # 39；左 # 39；；} else if(node . x gt；centex)position _ value = # 39；对 # 39；；else position _ value = # 39左 # 39；；return { label: node.id，labelCfg: { offset: 5，position: position_value，}，}；});this.graph.data(数据)；this . graph . render()；this . graph . fit view()；},});欢迎参与讨论。如果你对思维导图或者图形可视化感兴趣，可以加我的微信openwayne到我们的微信群讨论。

有关编程的更多信息，请访问:编程入门！！也就是上面的思维导图是什么？如何在小程序中使用F6绘制思维导图？更多详情请关注主机参考其他相关文章！

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

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