CODEWITHSUNDEEP
d3.js
user123
user123

Reputation: 163

Draw circles inside pie - d3 chart

Hi i have created a pie chart using https://bl.ocks.org/mbostock/3887235 How to add a circle inside each arcs - Example. Need to draw two circle inside 25-44 pie, two circle inside 18-24 pie, two circle inside <5 so on...

How to make sure the circle drawn lies inside those arc. Please help

Upvotes: 3

Views: 1585

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do it just as how you making label on the pie chart.

//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);

Then use the the arc function to calculate the translate

      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")

Working code here

Upvotes: 3

Related Questions