Question

我试图修改d3径向树图示例我发现并且关于互联网。原始节点之间有一条对角线弯曲的路径，我需要它是直线。

经过几个小时的奋斗，我最终成功地做到了这一点。好吧，有点儿。

正如您在this pen中所看到的，连接节点的线条确实是直的，但它们并非源自相同的中心点。对于中心节点和第一级链接，行起始点在所述节点的边缘上会聚，而较高级别的节点是按行排序而不是一行，中心点我渴望并且非常渴望。负责在笔中绘制链接的代码部分以行252开头，以276结尾，如下所示：

            var link = svg.selectAll("link")
            .data(links)
            .enter().append("path")
            .attr("class", "link");

            var lines = svg.selectAll('line')
            .data(links)
            .enter()
            .append('line')
            .attr('stroke',function(d) {
                if(d.source.depth === 0) {
                    return 'red'
                } else {
                    return '#ccc';
                }
            });

            lines.attr('x1',function(d){return d.source.y})
            .attr('y1',function(d){return d.source.x/180*Math.PI})
            .attr('x2',function(d){return d.target.y })
            .attr('y2',function(d){return d.target.x/180*Math.PI});

            lines.attr("transform", function(d) {
                return "rotate(" + (d.target.x - 90 ) + ")";
            });

我已经尝试了所有我能想到的东西，就绘图x1, x2, y1, y2而言，转换它们，改变那里的数学等等。此外，尝试改变旋转并强制坐标到链接上。每次回来都是空的。难道你们，SO的好人，能看一眼并指出我正确的方向吗？

Answer 1

没有足够的声誉发表评论，因此张贴为答案。我很久以前就已经这样做了，但现在不记得了。您的x1，y1，x2，y2值似乎不对。

我给了x1 = d.source.x，x2 = d.target.x，y1 = d.source.y，y2 = d.target.y。然后，用x1，y1旋转该线，因为它是角度的中心（我忘了抱歉）。

你应该用翻译进行轮换

d3径向图中的奇怪路径/线性行为

1 个答案: