Mindmap Vue Component

Based on d3.js

中文说明

Online demo：https://blog.5xin.xyz/mycomponents/mindmap

Function

Support keyboard and mouse

• Drag
• Zoom
• Add, delete and edit node
• ...

Usage

• tab - Add child node
• enter - Add siblings
• delete - Delete node
• right click - Open contextMenu
• click twice - Edit node content
• ...

Install

npm install @hellowuxin/mindmap

// In your vue file
import mindmap from '@hellowuxin/mindmap'

API

Name	Type	Default	Description
v-model	Array	undefined	Set up mindmap data
width	Number	100%	Set component width
height	Number	100%	Set component height
xSpacing	Number	80	Set node horizontal spacing
ySpacing	Number	20	Set node vertical spacing
draggable	Boolean	true	Set whether the node is draggable
gps	Boolean	true	Whether to show the center button
fitView	Boolean	true	Whether to show the zoom button

Example

<template>
  <div id="app">
    <mindmap
      v-model="data"
    ></mindmap>
  </div>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'

export default {
  name: 'App',
  components: {
    mindmap
  },
  data: () => ({
    data: [{
      "name":"如何学习D3",
      "children":
      [
        {
          "name":"预备知识",
          "children":
          [
            {"name":"HTML & CSS", "children": []},
            {"name":"JavaScript", "children": []}
        },
        {
          "name":"安装",
          "children": []
        },
        ...
      ]
    }]
  })
}
</script>

Todo

• Export multiple formats
• Set node width and height
• Multiple root nodes
• Collapse node
• ...