D3 天眼查 股权穿透 股权结构，默认第一行，异步添加，加减号居中，拖拽，缩放, hover。

因为公司项目需求，在以下相关博客的的基础上，进行了修改。 

​​​​​​D3 天眼查 股权穿透 股权结构

1.鼠标经过路径高亮。

 

2. 加减号优化，很多文章都是直接text标签渲染 “+”“-”，导致无法居中。 以下优化案例。

加号是用path实现的：

let plus = "M-6 -1.5 H-1.5 V-6 H1.5 V-1.5 H6 V1.5 H1.5 V6 H-1.5 V1.5 H-6 Z";

let reduce = "M-6 -1.5 H6 V1.5 H-6 Z";

3.点击加号异步加载。

function click(d) {
          let target = d3.select(this);
          let path = target.select("path")[0][0];
          let hasChildren = d.children.length > 0;
          let state = hasChildren ? plus : reduce;
          d3.select(path).attr("d", state);
          if (hasChildren) {
            d.children = [];
            update(d, originalData, g);
          } else {
            var companyName = d.companyName;
            var Pdata = {
              upperName: companyName,
              parentName: rootName,
              type: d.type,
              level: d.level + 1
            };
            getStockRightLevel(Pdata).then(res => {
              d.children = res.data;
              d.children.forEach(collapse);
              update(d, originalData, g);
            });
          }
        }

记录几个比较关键的D3 api方法，真想实现这个功能，必须的去看D3的API，加上svg基本的了解，看几个博客真解决不了需求  - -！

d3.layout.tree().nodeSize();

tree.nodes();

tree.links();

each();