小程序中如何繪制思維導(dǎo)圖詳解
更新時(shí)間：2021年10月13日 14:30:25 作者：AntCredit
小程序相信大家應(yīng)該都很熟悉了,對于小程序的整個(gè)運(yùn)營的方法,很多運(yùn)營都比較關(guān)注,今天希望通過一個(gè)思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于小程序中如何繪制思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下
什么是思維導(dǎo)圖？
思維導(dǎo)圖（英語：mind map），又稱腦圖、心智地圖、頭腦風(fēng)暴圖、心智圖、靈感觸發(fā)圖、概念地圖、或思維地圖，是一種用圖像整理信息的圖解。它用一個(gè)中央關(guān)鍵詞或想法以輻射線形連接所有的代表字詞、想法、任務(wù)或其它關(guān)聯(lián)項(xiàng)目。它可以利用不同的方式去表現(xiàn)人們的想法，如引題式、可見形象化式、建構(gòu)系統(tǒng)式和分類式。它普遍地用作在研究、組織、解決問題和政策制定中?！毒S基百科》
思維導(dǎo)圖是由英國的托尼·博贊于1970年代提出的一種輔助思考工具。以目標(biāo)主題為中心節(jié)點(diǎn)不斷向外延展關(guān)聯(lián)，不斷分解和探索，最終形成一張完整的樹狀圖。從具體的操作過程來看，也可以理解為對探索過程的可視化，完整記錄了每一次關(guān)聯(lián)的結(jié)果。這種形式更加符合人的思考方式，最后的圖也讓我們對主題更有體感和整體的了解。
正因?yàn)樗季S導(dǎo)圖的關(guān)注點(diǎn)在于思考，而我們的正?；顒与x不開思考，所以思維導(dǎo)圖有非常廣泛的使用場景。比如總結(jié)歸納、報(bào)告演示、頭腦風(fēng)暴等。實(shí)施起來只需要紙筆足以，當(dāng)然也有豐富的在線、獨(dú)立應(yīng)用可以支持到圖的制作。如果我們的產(chǎn)品需要展示圍繞一個(gè)主題的多層關(guān)聯(lián)信息的時(shí)候，便可以采用思維導(dǎo)圖的形式。F6可以很方便地在小程序中繪制腦圖，比如上圖的效果，有相關(guān)需求的同學(xué)值得一試。
F6中如何繪制
演示示例可以參考f6.antv.vision/zh/docs/exa…
本節(jié)代碼已經(jīng)開源，感興趣可以查看
支付寶中
首先安裝
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)自動兩側(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() {
// 注冊自定義樹，節(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對象，在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ú)提取出來寫）
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 由于微信對npm包不是很友好，所以我們分裝了 @antv/f6-wx 幫助用戶簡化操作。
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)自動兩側(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() {
// 注冊自定義樹，節(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對象，在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ú)提取出來寫）
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();
},
});
總結(jié)
到此這篇關(guān)于小程序中如何繪制思維導(dǎo)圖的文章就介紹到這了,更多相關(guān)小程序繪制思維導(dǎo)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
批量下載對路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄肯螺d對路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考2016-06-06
本文為大家詳細(xì)介紹下JSF中confirm彈出框的使用方法，感興趣的朋友可以參考下2014-01-01
JS實(shí)現(xiàn)數(shù)組扁平化的8種方式總結(jié)
數(shù)組扁平化指的是將一個(gè)多層嵌套的數(shù)組，處理成只有一層的數(shù)組，本文為大家整理了8個(gè)常用的JS實(shí)現(xiàn)數(shù)組扁平化的方法，希望對大家有所幫助2023-08-08
原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018
本文主要介紹了原生js實(shí)現(xiàn)倒計(jì)時(shí)--2018的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
BOM操作querySelector?querySeletorAll獲取標(biāo)簽對象
這篇文章主要為大家介紹了BOM操作querySelector?querySeletorAll獲取標(biāo)簽對象步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
js實(shí)現(xiàn)文件流式下載文件方法詳解及完整代碼
這篇文章主要介紹了用js實(shí)現(xiàn)讀取文件流并下載到本地的方法,也就是我們經(jīng)常說的使用js下載文件需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了圖片文字識別（OCR）插件Ocrad.js教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
本文為大家介紹下使用js對輸入框進(jìn)行限制：文本框只能輸入數(shù)字代碼、只能輸入數(shù)字、只能輸入字母和漢字、只能輸入英文字母和數(shù)字等等，還有很多，感興趣的可以學(xué)習(xí)下2013-07-07
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-10-10
JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能,涉及javascript面向?qū)ο笈c頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12