マインドマップとは何ですか?ミニプログラムで F6 キーを使用してマインドマップを描画するにはどうすればよいですか?-ミニプログラム開発-php.cn

マインドマップとは何ですか?ミニプログラムでマインドマップを描くには?次の記事では、F6 キーを使用して小さなプログラムでマインドマップを描画する方法を紹介します。

マインドマップとは何ですか?ミニプログラムで F6 キーを使用してマインドマップを描画するにはどうすればよいですか?

マインドマップとは何ですか?

マインドマップ(英語: マインドマップ)、ブレインマップ、マインドマップ、ブレインストーミング画像とも呼ばれます、マインドマップ、インスピレーショントリガーマップ、コンセプトマップ、またはシンキングマップは、画像を使用して情報を整理する方法です。図。中心となるキーワードやアイデアを使用して、すべての代表的な単語、アイデア、タスク、その他の関連項目を放射状に接続します。見積書型、可視化型、構築システム型、分類型など、さまざまな手法で人のアイデアを表現できます。研究、組織化、問題解決、政策策定によく使われます。「ウィキペディア」

マインドマップは、1970年代にイギリスのトニー・ブザンによって提案された補助的な思考ツールです。対象となるテーマを中心ノードとして、関係が継続的に外側に拡張され、分解され、探索され、最終的に完全な樹形図が形成されます。具体的な運用プロセスの観点から見ると、各関連付けの結果を完全に記録する探索プロセスの可視化としても理解できます。この形式は人々の考え方により一致しており、最終的な図は主題についてより物理的かつ全体的な理解を与えてくれます。

マインドマップとは何ですか?ミニプログラムで F6 キーを使用してマインドマップを描画するにはどうすればよいですか?

マインドマップの焦点は思考であり、私たちの通常の活動は思考と切り離せないものであるため、マインドマップの使用シーンは非常に幅広いです。まとめ、レポート発表、ブレインストーミングなど。これを実装するには、ペンと紙だけで十分ですが、図の作成をサポートできるさまざまなオンラインアプリケーションや独立したアプリケーションももちろんあります。製品がトピックに関する関連情報を複数のレイヤーで表示する必要がある場合は、マインドマップを使用できます。 F6 を使用すると、上の図の効果など、小さなプログラムで脳マップを簡単に描画できます。関連するニーズを持つ学生は試してみる価値があります。 [関連する学習の推奨事項:小さなプログラム開発チュートリアル]

F6 で描画する方法

デモ例はf6.antv.vision/zh/docs を参照してください。 /exa …このセクションのコードはオープンソース化されています。興味がある場合は、チェックしてみてください。

Alipaygithub.com/antvis/F6/t…
WeChatgithub.com/antvis/F6/t…

Alipay で

最初のインストール

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'; /** * 脑图-自节点自动两侧分布 */ Page({ canvas: null, ctx: null, renderer: '', // mini、mini-native等，F6需要，标记环境 isCanvasInit: false, // canvas是否准备好了 graph: null, data: { width: 375, height: 600, pixelRatio: 2, forceMini: false, }, onLoad() { // 注册自定义树，节点等 F6.registerGraph('TreeGraph', TreeGraph); // 同步获取window的宽高 const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync(); 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(ctx, rect, canvas, renderer) { this.isCanvasInit = true; this.ctx = wrapContext(ctx); this.renderer = renderer; this.canvas = canvas; this.updateChart(); }, /** * canvas派发的事件，转派给graph实例 */ handleTouch(e) { this.graph && this.graph.emitEvent(e); }, 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(); }, });

ログイン後にコピー

index.axml

ログイン後にコピー

WeChat で

最初にinstall

npm install @antv/f6-wx -S

ログイン後にコピー

@ antv/f6-wxWeChat は npm パッケージにあまり適していないため、ユーザーが操作を簡素化できるように@antv/f6-wxを再パッケージしました。。

data.js 同上

index.json

{ "defaultTitle": "脑图", "usingComponents": { "f6-canvas": "@antv/f6-wx/canvas/canvas" } }

ログイン後にコピー

index.wxml

ログイン後にコピー

index.js

import F6 from '@antv/f6-wx'; import TreeGraph from '@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的宽高 const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync(); 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) { const {ctx, rect, canvas, renderer} = event.detail 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(); }, });

ログイン後にコピー