您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何使用F6在小程序中繪制思維導(dǎo)圖”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
思維導(dǎo)圖(英語(yǔ):mind map),又稱腦圖、心智地圖、頭腦風(fēng)暴圖、心智圖、靈感觸發(fā)圖、概念地圖、或思維地圖,是一種用圖像整理信息的圖解。它用一個(gè)中央關(guān)鍵詞或想法以輻射線形連接所有的代表字詞、想法、任務(wù)或其它關(guān)聯(lián)項(xiàng)目。它可以利用不同的方式去表現(xiàn)人們的想法,如引題式、可見(jiàn)形象化式、建構(gòu)系統(tǒng)式和分類式。它普遍地用作在研究、組織、解決問(wèn)題和政策制定中?!毒S基百科》
思維導(dǎo)圖是由英國(guó)的托尼·博贊于1970年代提出的一種輔助思考工具。以目標(biāo)主題為中心節(jié)點(diǎn)不斷向外延展關(guān)聯(lián),不斷分解和探索,最終形成一張完整的樹(shù)狀圖。從具體的操作過(guò)程來(lái)看,也可以理解為對(duì)探索過(guò)程的可視化,完整記錄了每一次關(guān)聯(lián)的結(jié)果。這種形式更加符合人的思考方式,最后的圖也讓我們對(duì)主題更有體感和整體的了解。
正因?yàn)樗季S導(dǎo)圖的關(guān)注點(diǎn)在于思考,而我們的正?;顒?dòng)離不開(kāi)思考,所以思維導(dǎo)圖有非常廣泛的使用場(chǎng)景。比如總結(jié)歸納、報(bào)告演示、頭腦風(fēng)暴等。實(shí)施起來(lái)只需要紙筆足以,當(dāng)然也有豐富的在線、獨(dú)立應(yīng)用可以支持到圖的制作。如果我們的產(chǎn)品需要展示圍繞一個(gè)主題的多層關(guān)聯(lián)信息的時(shí)候,便可以采用思維導(dǎo)圖的形式。F6可以很方便地在小程序中繪制腦圖,比如上圖的效果,有相關(guān)需求的同學(xué)值得一試?!鞠嚓P(guān)學(xué)習(xí)推薦:小程序開(kāi)發(fā)教程】
演示示例可以參考f6.antv.vision/zh/docs/exa…本節(jié)代碼已經(jīng)開(kāi)源,感興趣可以查看
支付寶 github.com/antvis/F6/t…
微信 github.com/antvis/F6/t…
首先安裝
npm install @antv/f6 @antv/f6-alipay -S
data.js
export default { id: 'Modeling Methods', children: [ { id: 'Classification', children: [ { id: 'Logistic regression', }, { id: 'Linear discriminant analysis', }, { id: 'Rules', }, { id: 'Decision trees', }, { id: 'Naive Bayes', }, { id: 'K nearest neighbor', }, { id: 'Probabilistic neural network', }, { id: 'Support vector machine', }, ], }, { id: 'Consensus', children: [ { id: 'Models diversity', children: [ { id: 'Different initializations', }, { id: 'Different parameter choices', }, { id: 'Different architectures', }, { id: 'Different modeling methods', }, { id: 'Different training sets', }, { id: 'Different feature sets', }, ], }, { id: 'Methods', children: [ { id: 'Classifier selection', }, { id: 'Classifier fusion', }, ], }, { id: 'Common', children: [ { id: 'Bagging', }, { id: 'Boosting', }, { id: 'AdaBoost', }, ], }, ], }, { id: 'Regression', children: [ { id: 'Multiple linear regression', }, { id: 'Partial least squares', }, { id: 'Multi-layer feedforward neural network', }, { id: 'General regression neural network', }, { id: 'Support vector regression', }, ], }, ], };
index.json
{ "defaultTitle": "mindMap", "usingComponents": { "f6-canvas": "@antv/f6-alipay/es/container/container" } }
index.js
import F6 from '@antv/f6'; import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph'; import { wrapContext } from '../../../common/utils/context'; import data from './data'; /** * 腦圖-自節(jié)點(diǎn)自動(dòng)兩側(cè)分布 */ Page({ canvas: null, ctx: null, renderer: '', // mini、mini-native等,F(xiàn)6需要,標(biāo)記環(huán)境 isCanvasInit: false, // canvas是否準(zhǔn)備好了 graph: null, data: { width: 375, height: 600, pixelRatio: 2, forceMini: false, }, onLoad() { // 注冊(cè)自定義樹(shù),節(jié)點(diǎn)等 F6.registerGraph('TreeGraph', TreeGraph); // 同步獲取window的寬高 const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync(); this.setData({ width: windowWidth, height: windowHeight, pixelRatio, }); }, /** * 初始化cnavas回調(diào),緩存獲得的context * @param {*} ctx 繪圖context * @param {*} rect 寬高信息 * @param {*} canvas canvas對(duì)象,在render為mini時(shí)為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派發(fā)的事件,轉(zhuǎn)派給graph實(shí)例 */ handleTouch(e) { this.graph && this.graph.emitEvent(e); }, updateChart() { const { width, height, pixelRatio } = this.data; // 創(chuàng)建F6實(shí)例 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禁止嵌套的三元表達(dá),所以單獨(dú)提取出來(lái)寫(xiě)) 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(); }, });
index.axml
<f6-canvas width="{{width}}" height="{{height}}" forceMini="{{forceMini}}" pixelRatio="{{pixelRatio}}" onTouchEvent="handleTouch" onInit="handleInit" ></f6-canvas>
首先安裝
npm install @antv/f6-wx -S
@antv/f6-wx
由于微信對(duì)npm包不是很友好,所以我們分裝了 @antv/f6-wx
幫助用戶簡(jiǎn)化操作。
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
import F6 from '@antv/f6-wx'; import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph'; import data from './data'; /** * 腦圖-自節(jié)點(diǎn)自動(dòng)兩側(cè)分布 */ Page({ canvas: null, ctx: null, renderer: '', // mini、mini-native等,F(xiàn)6需要,標(biāo)記環(huán)境 isCanvasInit: false, // canvas是否準(zhǔn)備好了 graph: null, data: { width: 375, height: 600, pixelRatio: 1, forceMini: false, }, onLoad() { // 注冊(cè)自定義樹(shù),節(jié)點(diǎn)等 F6.registerGraph('TreeGraph', TreeGraph); // 同步獲取window的寬高 const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync(); this.setData({ width: windowWidth, height: windowHeight, // pixelRatio, }); }, /** * 初始化cnavas回調(diào),緩存獲得的context * @param {*} ctx 繪圖context * @param {*} rect 寬高信息 * @param {*} canvas canvas對(duì)象,在render為mini時(shí)為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派發(fā)的事件,轉(zhuǎn)派給graph實(shí)例 */ handleTouch(e) { this.graph && this.graph.emitEvent(e.detail); }, updateChart() { const { width, height, pixelRatio } = this.data; // 創(chuàng)建F6實(shí)例 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禁止嵌套的三元表達(dá),所以單獨(dú)提取出來(lái)寫(xiě)) 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(); }, });
“如何使用F6在小程序中繪制思維導(dǎo)圖”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。