d3.v4轮状树图实现

4版本api资料太少了，好多功能实现不了，暂时先实现到这一步吧

export default{
    init:function(classpath,data){
             var width = document.body.clientWidth;
            var height = document.body.clientHeight-65;
            

     var svg = d3.select(classpath)
                .append("svg")
                .attr("width", width)
                .attr("height", height),
                 g = svg.append("g").attr("transform", "translate(" + (width / 2  ) + "," 
                     + (height / 2  ) + ")");

        var stratify = d3.stratify()
            .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

        var tree = d3.tree()
            .size([2 * Math.PI, 300])
            .separation(function(a, b) { 
                return (a.parent == b.parent ? 1 : 2) / a.depth; 
            });

            svg.append("rect")
              .attr("width", width)
              .attr("height", height)
              .style("fill", "none")
              .style("pointer-events", "all")
              .call(d3.zoom()
                  .scaleExtent([1 / 4, 4])
                  .on("zoom", zoomed));

            function zoomed() {
              g.attr("transform", d3.event.transform);
            }

          var root = tree(stratify(data));

          var link = g.selectAll(".link")
            .data(root.links())
            .enter().append("path")
              .attr("class", "link")
              .attr("d", d3.linkRadial()
                  .angle(function(d) { return d.x; })
                  .radius(function(d) { return d.y; }));

          var node = g.selectAll(".node")
              .data(root.descendants())
              .enter().append("g");
          

              node
               .on("click",nodeClick)
              .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
              .attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; });
              
          

          node.append("circle")
              .attr("r", 10)
              .style("fill", function(d) {
                  if(d.id.split(".")[1] === "企业对外投资"||d.id.split(".")[1] === "分支机构"){
                      if(d.depth == 1 && d.id.split(".")[1] === "企业对外投资"){
                          return "#8789fa";
                      }else if(d.depth == 1 && d.id.split(".")[1] === "分支机构"){
                          return "#d95546";
                      }else if(d.depth > 1){
                          return "#8db739";
                      }
                  }else{
                    if(d.depth ==1 && d.id.split(".")[1] === "法人对外任职"){
                          return "#93536e";
                      }else if(d.depth == 1 && d.id.split(".")[1] === "股东信息"){
                          return "#2ba993";
                      }else if(d.depth == 1 && d.id.split(".")[1] === "高管信息"){
                          return "#4290c1";
                      }else if(d.depth > 1){
                          return "#dcb071";
                      }
                  }
                  return 'ef4f39' 
              });

          node.append("text")
              .attr("dy", "0.31em")
              .attr("x", function(d) { return d.x < Math.PI === !d.children ? 10 : -10; })
              .attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
              .attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
              .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });

        function radialPoint(x, y) {
          return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
        }
          //点击的话，隐藏或者显示子节点
         function nodeClick(d) {
                 console.info(d);
             if (d.children) {
                 d._children = d.children;
                 d.children = null;
             } else{
                 d.children = d._children;
                 d._children = null;
                }
             update(d);
         }
    }
}