d3.j 将径向树与链接（直）树混合答案

【问题标题】：d3.j mixing radial tree with link (straight) treed3.j 将径向树与链接（直）树混合
【发布时间】：2019-09-25 13:54:32
【问题描述】：

关于这个例子（d3.j radial tree node links different sizes），我想知道是否可以在 d3.js 中混合径向树和直线树。

对于我的jsFiddle 示例：https://jsfiddle.net/j0kaso/fow6xbdL/ 我希望父级 (level0) 与第一个子级 (level1) 有一条直线，然后是径向弯曲树（就像现在一样）。

这可能吗？

我找不到与之相关的任何内容，但由于我对 d3.js/JS 比较陌生，我可能只是错过了正确的关键字。希望有人有一个可行的例子，或者可以为我指明正确的方向 - 无论如何，我感谢任何提示和 cmets！

【问题讨论】：

标签： javascript d3.js tree radial

【解决方案1】：

如果链接的源深度为 0，则可以从链接的源和目标的 x 和 y 生成 SVG 路径，类似于使用三角法计算节点位置的方式，其中 x 是旋转角度，y 是半径.

    //create the linkRadial function for use later in the 'd' generation
    const radialPath = d3.linkRadial()
     .angle(l => l.x)
     .radius(l => l.y)

    const link = svg.append("g")
     .attr("fill", "none")
     .attr("stroke-opacity", 0.4)
     .attr("stroke-width", 1.5)
     .selectAll("path")
     .data(root.links())
     .enter()
     .append("path")

    link.attr("d", function(d){

            let adjust = 1.5708 //90 degrees in radians

            // calculate the start and end points of the path, using trig
            let sourceX = (d.source.y * Math.cos(d.source.x - adjust)); 
            let sourceY = (d.source.y * Math.sin(d.source.x - adjust)); 
            let targetX = (d.target.y * Math.cos(d.target.x - adjust)); 
            let targetY = (d.target.y * Math.sin(d.target.x -adjust)); 


            // if the source node is at the centre, depth = 0, then create a straight path using the L (lineto) SVG path. Else, use the radial path
            if (d.source.depth==0){
              return "M" + sourceX + " " + sourceY + " "
                + "L" + targetX + " " + targetY 
            } else {
              return radialPath(d)
            }

    })

【讨论】：