How to draw a mind map in a mini program

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 F6

For 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…

Alipay

First 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>

WeChat

First 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();
  },
});

Summarize

This 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

The order of event execution in the node event loop

Table of contents Event Loop Browser environment ...

CSS HACK for IE6/IE7/IE8/IE9/FF (summary)

Since I installed the official version of IE8.0, ...

Detailed explanation of mandatory and implicit conversion of types in JavaScript

Table of contents 1. Implicit conversion Conversi...

Linux steps to configure local yum source, configure domestic yum source, and configure epel source

1. Configure local yum source 1. Mount the ISO im...

Usage of Linux userdel command

1. Command Introduction The userdel (user delete)...

Linux file and user management practice

1. Display the files or directories in the /etc d...

Ubuntu View and modify mysql login name and password, install phpmyadmin

After installing MySQL, enter mysql -u root -p in...

WeChat applet implements waterfall flow paging scrolling loading

This article shares the specific code for WeChat ...

How to use webSocket to update real-time weather in Vue

Table of contents Preface About webSocket operati...

How to create a MySQL database and support Chinese characters

Let's first look at the MySQL official docume...

Summary of several common methods of JavaScript arrays

Table of contents 1. Introduction 2. filter() 3. ...

Tomcat security specifications (tomcat security reinforcement and specifications)

tomcat is an open source web server. The web base...

How to use nginx to intercept specified URL requests through regular expressions

nginx server nginx is an excellent web server tha...

Detailed explanation of the use of MySQL paradigm

1. Paradigm The English name of the paradigm is N...

MySQL Community Server 5.6 installation and configuration tutorial under Windows 8

This article records the installation and configu...