利用D3.js实现思维导图

最新推荐文章于 2024-07-02 16:04:34 发布

weixin_30624825

最新推荐文章于 2024-07-02 16:04:34 发布

阅读量5.1k

点赞数

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5d42b2b7e51d4561c541a63a

版权

本文介绍了如何利用D3.js数据可视化库来实现思维导图的制作。通过HTML、JavaScript和CSS的结合，作者展示了创建简易思维导图的过程，并附有截图。文章提及可以进行节点操作，表示后续还会继续优化和完善。

摘要由CSDN通过智能技术生成

由于公司需求，所以需要做数据可视化。看了很多库，觉的D3.js库很强大，于是决定用D3.js库。在使用树状图时，看到固定的树形图，在想能不能做了思维导图了，于是便开始了探索。。。

//先进行NPM安装
npm i vued3tree 

// 在页面中引用
import * as d3 from 'd3'
import {tree} from 'vued3tree'
复制代码

html:

// 用的是ELEMENT-UI
<template>
    <div class="main">
        <div class="tb-menu" ref="main" :style="menuPos" v-show="isMenuShow" style="z-index: 1">
            <div v-show="menuInfo.move" @click="menuClick('move')">删除节点</div>
            <div v-show="menuInfo.inNextNode" @click="menuClick('inNextNode')">插入下一级节点</div>
            <div v-show="menuInfo.inSameNode" @click="menuClick('inSameNode')">插入同级节点</div>
            <div v-show="menuInfo.reName" @click="menuClick('reName')">重命名</div>
          </div>
          <div class="context">
            <tree :data="tree" node-text="name" @clicked="addNode"  @mouseup.stop="rClick($event,idx)" type="cluster" layoutType="euclidean">
            </tree>
          </div>
          // 点击节点出现的弹窗
          <el-dialog
            :visible.sync=