Package Exports

proc-mindmap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (proc-mindmap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Mindmap Vue Component

npm

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