javascript - d3.js 画线源和目标不同(从 d3.svg.arc() 生成的圆弧到具有基数位置的节点)

Question

我尝试在sunburst内添加一些带有矩形的文本

对于Sunburst，内圆弧环，x,y代表 Angular 和半径，然而，sunburst内部的矩形由Cardinal位置表示。

对于绘制线条，我知道我可以使用 d3.svg.line 或 d3.svg.diagonal。但它们的源和目标是同一类型。

但就我而言，源 和目标 中的 x,y 是不同的。

我该怎么办？

我知道我可以将内部矩形更改为圆弧位置，以便源和目标可以匹配。

但是有什么好的方法可以做到这一点吗？

如有任何建议，我们将不胜感激。

Answer 1

自定义 d3.svg.diagonal() 的源和目标。 使用不同的方法变换源和目标的空间。

var diagonal = d3.svg.diagonal()
                        .source(function (d) {
                            var innerRadius = Math.max(0, y(d.source.y));
                            var arcCenter = x(d.source.x + d.source.dx/2.0);

                            return {"x": innerRadius * Math.cos(Math.PI - arcCenter),      //radial space
                                "y": innerRadius * Math.sin(Math.PI - arcCenter)};
                        })
                        .target(function (d) {                                           //normal space
                            return {"x": d.target.y + rect_height / 2,
                                "y": d.source.x ? d.target.x : d.target.x + rect_width};
                        })
                        .projection(function (d) {
                            return [d.y, d.x];
                        });