Question

为了绘制一个接力棒，其起点取圆弧图中心的坐标为圆弧d3 js，如何确定每个弧心的坐标？我尝试了这段代码，但只有第一根指挥棒处于正确的位置。

        var lines = arcs.selectAll("line")
                      .data(data)
                       .enter()
                      .append("line")
                      .attr("x1", function(d, i) { return r*Math.cos( parseFloat(d)/r);})
                      .attr("y1", function(d) { return r*Math.sin( parseFloat(d)/r) ;}) 
                      .attr("x2", function(d) { return r*Math.cos( parseFloat(d)/r) + parseFloat(d) ;}) 
                      .attr("y2", function(d) { return r*Math.sin( parseFloat(d)/r) + parseFloat(d) ;}) 
                     .attr("class", "line")

                     .style("stroke", function (d) {return color(d.data) ; })
                     .style("stroke-width", "3px");

我需要你的帮助。

Answer 1

正如评论中所指出的，arc.centroid() function提供了此功能：

var pie = d3.layout.pie().value(function(d){ return d.value; });
var arc = d3.svg.arc().innerRadius(0).outerRadius(r);
var centers = pie(data).map(arc.centroid);

或选择D3：

var centers = [];
arcs.each(function(d) {
  centers.push(arc.centroid(d));
});

完整演示here。

饼图中每个中心圆弧的坐标

1 个答案: