javascript - d3 径向图中奇怪的路径/线条行为

Question

我正在尝试修改我在互联网上找到的 d3 径向 TreeMap 示例。原始节点之间有一条对 Angular 线、弯曲的路径，我需要它是直线。

经过几个小时的努力，我终于做到了这一点。嗯，有点。

正如您在 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 为中心旋转该线到 Angular (我忘记了抱歉)。

你应该在平移的同时进行旋转