What is a mind map?
A mind map, also known as a brain map, mind map, brainstorming, mind map, inspiration trigger, concept map, or mind map, is a kind of pictorial arrangement of information. It uses a central keyword or idea to connect all representative words, ideas, tasks, or other related items in a radiating line. It can use different ways to express people’s ideas, such as title, visual visualization, construction system and classification. It is commonly used in research, organization, problem solving, and policy making. Wikipedia
Mind mapping is an auxiliary thinking tool proposed by British Tony Bozan in the 1970s. With the target theme as the central node, it will continue to extend and expand the association, and continue to decompose and explore, and eventually form a complete tree chart. From the point of view of the specific operation process, it can also be understood as the visualization of the exploration process, and the results of each association are completely recorded. This form is more in line with people’s way of thinking, and the final picture also gives us a better sense of body and overall understanding of the theme.
Because mind mapping focuses on thinking, and our normal activities depend on thinking, mind mapping has a wide range of uses. Such as summarization, presentation, brainstorming, etc. All it takes is a pen and paper, but there are plenty of online, stand-alone apps that can support the creation of images. Mind maps can be used when our product needs to display multiple layers of related information around a topic. F6 can be very convenient in the small program to draw a brain map, such as the effect of the above, students with relevant needs worth a try.
How to draw in F6
Demo sample can reference f6. Antv. Vision/useful/docs/exa… This section of the code has been open source, interested can view
- Pay treasure github.com/antvis/F6/t…
- WeChat github.com/antvis/F6/t…
In the pay treasure
First installation
npm install @antv/f6 @antv/f6-alipay -S
Copy the code
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',},],},],};Copy the code
index.json
{
"defaultTitle": "mindMap"."usingComponents": {
"f6-canvas": "@antv/f6-alipay/es/container/container"}}Copy the codeindex.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';
/** * brain map - automatic bilateral distribution of nodes */
Page({
canvas: null.ctx: null.renderer: ' '.// Mini, Mini-native, etc., F6 need, mark the environment
isCanvasInit: false.// Is the canvas ready
graph: null.data: {
width: 375.height: 600.pixelRatio: 2.forceMini: false,},onLoad() {
// Register custom trees, nodes, etc
F6.registerGraph('TreeGraph', TreeGraph);
// Synchronize the width and height of the window
const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio,
});
},
/** * Initializes the cnavas callback, caching the obtained context *@param {*} CTX plotting context *@param {*} Rect width and height information *@param {*} Canvas Canvas object, null * when render is mini@param {*} 1.0, 2.0 or canvas the renderer to use canvas mini | mini - native * /
handleInit(ctx, rect, canvas, renderer) {
this.isCanvasInit = true;
this.ctx = wrapContext(ctx);
this.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/** * Canvas dispatches events to graph instance */
handleTouch(e) {
this.graph && this.graph.emitEvent(e);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
// Create an F6 instance
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;
}
// The value of position (since ESlint forbids nested ternary expressions, extract it separately to write)
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(); }});Copy the codeindex.axml
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
onTouchEvent="handleTouch"
onInit="handleInit"
></f6-canvas>
Copy the codeIn the WeChat
First installation
npm install @antv/f6-wx -S
Copy the code@ANTV/F6-wx Since wechat is not very friendly to NPM package, we installed @ANTv/F6-wx to help users simplify operations.
The above data. Js
index.json
{
"defaultTitle": "Brain map"."usingComponents": {
"f6-canvas": "@antv/f6-wx/canvas/canvas"}}Copy the codeindex.wxml
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
bind:onTouchEvent="handleTouch"
bind:onInit="handleInit"
></f6-canvas>
Copy the codeindex.js
import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';
import data from './data';
/** * brain map - automatic bilateral distribution of nodes */
Page({
canvas: null.ctx: null.renderer: ' '.// Mini, Mini-native, etc., F6 need, mark the environment
isCanvasInit: false.// Is the canvas ready
graph: null.data: {
width: 375.height: 600.pixelRatio: 1.forceMini: false,},onLoad() {
// Register custom trees, nodes, etc
F6.registerGraph('TreeGraph', TreeGraph);
// Synchronize the width and height of the window
const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
// pixelRatio,
});
},
/** * Initializes the cnavas callback, caching the obtained context *@param {*} CTX plotting context *@param {*} Rect width and height information *@param {*} Canvas Canvas object, null * when render is mini@param {*} 1.0, 2.0 or canvas the renderer to use canvas 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 dispatches events to graph instance */
handleTouch(e) {
this.graph && this.graph.emitEvent(e.detail);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
// Create an F6 instance
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;
}
// The value of position (since ESlint forbids nested ternary expressions, extract it separately to write)
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(); }});Copy the code
Welcome to discuss
For mind mapping, or graph visualization, you can add my wechat OpenWayne to our wechat group discussions.