JsPlumb + D3js实现自定义节点，可拖拽节点,自动树状布局

准备环境

本文使用的是vue2,需要安装jsPlumb、D3、Jquery

npm install jsplump --save
npm install D3 --save
npm install jquery --save

效果演示

先通过D3将数据处理成树形结构，代码如下：

      // 参考D3API,这里会生成树形数据结构
      const data = D3.hierarchy(tree);
      // 使用D3 Tree自动布局, nodeSize控制节点x方向和y方向上的距离
      const treeGenerator = D3.tree().nodeSize([200, 180]);
      const treeData = treeGenerator(data);
      // 获取自动布局后的节点信息
      const nodes = treeData.descendants();
      // 获取父子关系列表
      const links = treeData.links();
      // 设置节点位置信息
      this.nodeList = nodes.map(item => {
        return {
          id: item.data.id,
          name: item.data.name,
          left: item.x + 500 + "px", // 900为初始X方向起点位置，默认为0
          top: item.y + "px"
        };
      });

      this.lineList = links.map(item => {
        return {
          source: `node-${item.source.data.id}`,
          target: `node-${item.target.data.id}`,
          deleteOnRightClick: true,
          overlays: [["Arrow", {width: 10, length: 10, location: 0.5}]]
        }
      })

在使用jsplump处理画关系图

this.$nextTick().then(() => {
        jsPlumb.ready(() => {
          // 创建jsPlumb实例
          this.jsPlumbInstance = jsPlumb.getInstance();
          // 导入准备好的jsPlumb配置
          this.jsPlumbInstance.importDefaults(this.jsPlumbSetting);
          // 开始节点间的连线
          this.lineList.forEach((item) => {
            this.jsPlumbInstance.connect(item, this.jsPlumbConnectOptions);
          });
          // 让每个节点都可以被拖拽
          this.nodeList.forEach((item, index) => {
            this.jsPlumbInstance.draggable("node-" + (index + 1))

            // 给每个节点添加锚点
            this.jsPlumbInstance.addEndpoint("node-" + (index + 1), {
              anchor: ['Bottom', 'Top', 'Left', 'Right'],
              Overlays: [
                ['Arrow', {width: 8, length: 8, location: 0.5, direction: 1, foldback: 0.623}]]
            }, this.commonLink)

          })
        })
        this.jsPlumbInstance.repaintEverything(); // 重绘
      })