How to draw a mind map in a mini program
What is a mind map?A mind map (English: mind map), also known as a brain map, mental map, brainstorming map, mind map, inspiration triggering map, concept map, or thinking map, is a graphic that organizes information with images. 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 introduction, visible visualization, system construction and classification. It is commonly used in research, organizing, problem solving, and policy making. Wikipedia Mind mapping is a thinking tool proposed by Tony Buzan of the United Kingdom in the 1970s. With the target topic as the central node, the associations are continuously extended outward, decomposed and explored, and finally a complete tree diagram is formed. From the perspective of the specific operation process, it can also be understood as a visualization of the exploration process, which fully records the results of each association. This form is more in line with people’s way of thinking, and the final picture also gives us a more tangible and overall understanding of the subject.
Because mind mapping focuses on thinking, and our normal activities are inseparable from thinking, mind mapping has a very wide range of usage scenarios. For example, summarizing, report presentation, brainstorming, etc. All you need to implement it is pen and paper, but there are also a variety of online and standalone applications that can support the creation of diagrams. If our product needs to display multiple layers of related information around a topic, we can use a mind map. F6 can easily draw mind maps in the mini program, such as the effect in the picture above. Students with relevant needs are worth a try. How to draw in F6For demonstration examples, please refer to f6.antv.vision/zh/docs/exa… The code in this section has been open sourced. If you are interested, you can check it out. Alipaygithub.com/antvis/F6/t… WeChatgithub.com/antvis/F6/t… AlipayFirst install 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';
/**
* Mind map - automatically distributes nodes to both sides*/
Page({
canvas: null,
ctx: null,
renderer: '', // mini, mini-native, etc., required by F6, mark environment isCanvasInit: false, // Is the canvas ready? graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 2,
forceMini: false,
},
onLoad() {
// Register custom tree, nodes, etc. F6.registerGraph('TreeGraph', TreeGraph);
// Synchronously obtain the width and height of the window const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio,
});
},
/**
* Initialize cnavas callback and cache the obtained context
* @param {*} ctx drawing context
* @param {*} rect width and height information * @param {*} canvas canvas object, null when render is mini
* @param {*} renderer uses canvas 1.0 or 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();
},
/**
* Events dispatched by canvas are forwarded to graph instances*/
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 prohibits nested ternary expressions, it is extracted and written separately)
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>
WeChatFirst install npm install @antv/f6-wx -S @antv/f6-wx Since WeChat is not very friendly to npm packages, we packaged @antv/f6-wx to help users simplify operations. data.js Same as above index.json
{
"defaultTitle": "Mind Map",
"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';
/**
* Mind map - automatically distributes nodes to both sides*/
Page({
canvas: null,
ctx: null,
renderer: '', // mini, mini-native, etc., required by F6, mark environment isCanvasInit: false, // Is the canvas ready? graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 1,
forceMini: false,
},
onLoad() {
// Register custom tree, nodes, etc. F6.registerGraph('TreeGraph', TreeGraph);
// Synchronously obtain the width and height of the window const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
// pixelRatio,
});
},
/**
* Initialize cnavas callback and cache the obtained context
* @param {*} ctx drawing context
* @param {*} rect width and height information * @param {*} canvas canvas object, null when render is mini
* @param {*} renderer uses canvas 1.0 or 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();
},
/**
* Events dispatched by canvas are forwarded to graph instances*/
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 prohibits nested ternary expressions, it is extracted and written separately)
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();
},
});
SummarizeThis is the end of this article about how to draw a mind map in a mini program. For more content about drawing a mind map in a mini program, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: How to solve the problem that Seata cannot use MySQL 8 version
>>: How to deploy MySQL and Redis services using Docker
Recommend
Detailed explanation of homology and cross-domain required for front-end interviews
Preface As we all know, the browser's homolog...
Detailed explanation of Nginx access restriction configuration
What is Nginx access restriction configuration Ng...
Detailed explanation of the minimum width value of inline-block in CSS
Preface Recently, I have been taking some time in...
Detailed explanation of how to use the mysql backup script mysqldump
This article shares the MySQL backup script for y...
Use of MySQL stress testing tool Mysqlslap
1. MySQL's own stress testing tool Mysqlslap ...
Comprehensive analysis of prototypes, prototype objects, and prototype chains in js
Table of contents Understanding Prototypes Unders...
Analysis of the project process in idea packaging and uploading to cloud service
one. First of all, you have to package it in idea...
Implementation of waterfall layout in uni-app project
GitHub address, you can star it if you like it Pl...
Jenkins+tomcat automatic hot deployment/restart and solutions to problems encountered (recommended)
1. Background The company's projects have alw...
Javascript to achieve drumming effect
This article shares the specific code of Javascri...
Decompression, installation, backup and restore of MySQL under Windows environment
The system environment is server2012 1. Download ...
WeChat applet to achieve automatic video playback imitating GIF animation effect example
Demand background: Insert GIF dynamic images into...
Advertising skills in the Baidu Union environment (graphic tutorial)
Recently, students from the User Experience Team o...
How to set up PostgreSQL startup on Ubuntu 16.04
Since PostgreSQL is compiled and installed, you n...
Add unlimited fonts to your website with Google Web Fonts
For a long time, website development was hampered...