d3.js - 在饼图内绘制圆圈 - d3 图表

Question

您好，我使用 https://bl.ocks.org/mbostock/3887235 创建了一个饼图 如何在每个圆弧内添加一个圆 - 示例。需要在25-44饼里面画两个圆，在18-24饼里面画两个圆，在<5里面画两个圆等等...

如何确保绘制的圆位于这些圆弧内。请帮忙

Answer 1

你可以像在饼图上做标签那样做。

//arc for 1st circle
var circleArc1 = d3.svg.arc()
    .outerRadius(radius - 70)
    .innerRadius(radius - 70);

//arc for 2nd circle
var circleArc2 = d3.svg.arc()
    .outerRadius(radius - 100)
    .innerRadius(radius - 100);

然后使用arc函数计算平移

      g.append("circle")
          .attr("transform", function(d) { return "translate(" + circleArc1.centroid(d) + ")"; }) //use arc 1
          .style("fill", "purple")
          .attr("r", "10");

  g.append("circle")
      .attr("transform", function(d) { return "translate(" + circleArc2.centroid(d) + ")"; }) //use arc2
      .style("fill", "violet")
      .attr("r", "10")

工作代码 here