Vue思维脑图插件：Mindmap

一个由MindNode启发的思维导图Vue组件，基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单…

Github
演示站

安装使用

// 安装
npm install @hellowuxin/mindmap
yarn add @hellowuxin/mindmap
# 引入
import mindmap from '@hellowuxin/mindmap'

示例

<template>
    <div class="college">
        <!-- 3. 使用插件并绑定数据 -->
        <Mindmap v-model="ssr"></Mindmap>
    </div>
</template>
<script>
    // 1. 引入插件
    import Mindmap from '@hellowuxin/mindmap'
    export default {
        data(){
            return {
                // 4. 数据类型
                ssr: [
                    {
                        "name": "计算机学院",
                        "children":
                            [
                                {
                                    "name": "预备知识",
                                    "children":
                                        [
                                            {"name": "HTML & CSS", "children": []},
                                            {"name": "JavaScript", "children": []}
                                        ]
                                },
                                {
                                    "name": "安装",
                                    "children": []
                                },
                            ]
                    }
                ]
            }
        },
        // 2. 声明插件
        components: {
            Mindmap,
        },
    }
</script>

API