Question

您好我使用https://bl.ocks.org/mbostock/3887235创建了一个饼图如何在每个弧内添加一个圆 - 示例。需要在25-44个馅饼内绘制两个圆圈，在18-24个馅饼内绘制两个圆圈，在内部两个圆圈＆lt; 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

在饼图中绘制圆圈 - d3图表

1 个答案: