Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use F6 to draw a mind map in Mini Program". Many people will encounter this dilemma in the operation of actual cases. then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is a mind map?

Mind map (English: mind map), also known as brain map, mind map, brainstorm map, mind map, inspiration map, concept map, or mind map, is a kind of diagram that collates information with images. It uses a central keyword or idea to radiate all representative words, ideas, tasks, or other related items. It can express people's ideas in different ways, such as citation, visible 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 Tony Bozan of the United Kingdom in the 1970s. Take the target theme as the central node to extend the association, decompose and explore constantly, and finally form a complete tree view. From the perspective of the specific operation process, it can also be understood as the visualization of the exploration process, fully recording the results of each association. This form is more in line with the way people think, and the final picture also gives us a more somatosensory and overall understanding of the theme.

It is precisely because the focus of mind mapping is thinking, and our normal activities can not be separated from thinking, so mind mapping has a very wide range of use scenarios. Such as summary, report and demonstration, brainstorming and so on. It only needs pen and paper to implement, and of course, there are plenty of online and independent applications that can support the production of drawings. If our product needs to display multiple layers of related information around a topic, it can be in the form of a mind map. F6 can easily draw brain maps in Mini Program, such as the effect of the above picture, students with related needs are worth a try. [recommended for related study: Mini Program Development tutorial]

How to draw in F6

For demonstration examples, please refer to f6.antv.vision/zh/docs/exa. The code in this section is open source. If you are interested, you can check out

Alipay github.com/antvis/F6/t...

Wechat github.com/antvis/F6/t...

In Alipay

Install first

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' / * brain map-automatically distributed on both sides of the node * / Page ({canvas: null, ctx: null, renderer:', / / mini, mini-native, etc., F6 needs, whether the tagging environment isCanvasInit: false, / / canvas is ready for graph: null, data: {width: 375,600, pixelRatio: 2, forceMini: false,}, onLoad () {/ register custom tree) Node and other F6.registerGraph ('TreeGraph', TreeGraph) / / obtain the width and height of window synchronously: const {windowWidth, windowHeight, pixelRatio} = my.getSystemInfoSync (); this.setData ({width: windowWidth, height: windowHeight, pixelRatio,}) }, / * initialize cnavas callback, cache context * @ param {*} ctx drawing context * @ param {*} rect width and height information * @ param {*} canvas canvas object, use canvas 1.0 or canvas 2.0 for null * @ param {*} renderer when render is 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, assigned to graph instance * / handleTouch (e) {this.graph & & this.graph.emitEvent (e);}, updateChart () {const {width, height, pixelRatio} = this.data / / create 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:' hacks, getHeight: function getHeight () {return 16 }, getWidth: function getWidth () {return 16;}, getVGap: function getVGap () {return 10;}, getHGap: function getHGap () {return 50;},},}); let centerX = 0 The value of this.graph.node (function (node) {if (node.id = 'Modeling Methods') {centerX = node.x;} / / position (because ESlint forbids nested ternary expressions, so 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

In Wechat

Install first

Npm install @ antv/f6-wx-S

@ antv/f6-wx because Wechat is not very friendly to npm packages, we have packaged @ antv/f6-wx to help users simplify their operations.

Data.js ditto

Index.json

{"defaultTitle": "brain map", "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' / * brain map-automatically distributed on both sides of the node * / Page ({canvas: null, ctx: null, renderer:', / / mini, mini-native, etc., F6 needs, whether the tagging environment isCanvasInit: false, / / canvas is ready for graph: null, data: {width: 375,600, pixelRatio: 1, forceMini: false,}, onLoad () {/ register custom tree Node and other F6.registerGraph ('TreeGraph', TreeGraph) / / obtain the width and height of window synchronously: const {windowWidth, windowHeight, pixelRatio} = wx.getSystemInfoSync (); this.setData ({width: windowWidth, height: windowHeight, / / pixelRatio,}) }, / * initialize the cnavas callback, and cache the context * @ param {*} ctx drawing context * @ param {*} rect width and height information * @ param {*} canvas canvas object, use canvas 1.0 or canvas 2.0 for null * @ param {*} renderer when render is 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, assigned to graph instance * / handleTouch (e) {this.graph & & this.graph.emitEvent (e.detail);}, updateChart () {const {width, height, pixelRatio} = this.data / / create 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:' hacks, getHeight: function getHeight () {return 16 }, getWidth: function getWidth () {return 16;}, getVGap: function getVGap () {return 10;}, getHGap: function getHGap () {return 50;},},}); let centerX = 0 The value of this.graph.node (function (node) {if (node.id = 'Modeling Methods') {centerX = node.x;} / / position (because ESlint forbids nested ternary expressions, so 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 ();},} This is the end of "how to use F6 to draw a mind map in Mini Program". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.