与此示例相关(d3.j 径向树节点链接不同的大小(,我想知道是否可以在 d3.js 中混合径向树和直线树。
对于我jsFiddle
的例子:https://jsfiddle.net/j0kaso/fow6xbdL/我希望父级(level0(与第一个子项(level1(有一条直线,然后是径向弯曲的树(就像现在一样(。
这可能吗?
我找不到与之相关的任何内容,但由于我对 d3.js/JS 相对较新,我可能只是错过了正确的关键字。希望有人有一个工作的例子,或者可以指出我正确的方向 - 无论如何,我感谢任何提示和评论!
如果链接源的深度为 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)
}
})