d3.js - 如何使用 d3.js 获取 sunburst 示例中每个弧的 startAngle 和 endAngle？

Question

我想在朝阳示例中获取每个弧的开始和结束角度，如http://bl.ocks.org/4063423：

Answer 1

您可以在代码中看到它们：

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

所以你的起始角度在 x 属性中，x + dx 给出你的结束角度。

诀窍是 x、dx、y 和 dy 都由布局函数设置：

var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return 1; });

sort(null) 告诉它不要重新排序你的数据 size(...) 告诉它 x 和 y 坐标的输出范围（半径是平方的，因为我们正在映射到一个区域）。value(...) 是如何加权每个项目的值访问器。

Answer 2

您可以使用这个简单的代码：

...
.data(partition.nodes)
.filter(function(d) { // You're not restricted to use the "filter" function
   var startAngle = arc.startAngle()(d);
   var endAngle = arc.endAngle()(d);
});
...