D3 Arc with Circle

D3 Arc with Circle - for stackoverflow

by Dibyanshu Banerjee

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

JavaScript

var vis = d3.select("body").append("svg")
var pi = Math.PI;
    
var arc1 = d3.svg.arc()
    .innerRadius(68)
    .outerRadius(70)
    .startAngle(5 * (pi/180)) 
    .endAngle(3) 
    
var arc2 = d3.svg.arc()
    .innerRadius(68)
    .outerRadius(70)
    .startAngle(5 * (pi/180)) 
    .endAngle(3) 
    
vis.attr("width", "600").attr("height", "600") 
    .append("path")
    .attr("d", arc1)
    .attr("fill", "black")
    .attr("transform", "translate(200,200)");
    
vis.attr("width", "600").attr("height", "600") 
    .append("path")
    .attr("d", arc2)
    .attr("fill", "black")
    .attr("transform", "translate(200,200), rotate(180)");
    
    
var arcradius = 68;
var circleradius = 10;

// Approx number of circles we can fit around the circumference
var n = (Math.PI * 2 * arcradius) / (2 * circleradius);

for (var i=0; i<10; i++)
{
  var ang = (Math.PI * 2 * i) / n;
  var cx = arcradius * Math.sin(ang);
  var cy = arcradius * Math.cos(ang);

  vis.append("circle")
    .attr('cx', cx)
    .attr('cy', cy)
    .attr('r', circleradius)
    .attr("transform", "translate(200,200)");
              
  vis.append("circle")
    .attr('cx', cx)
    .attr('cy', cy)
    .attr('r', circleradius)
    .attr("transform", "translate(200,200), rotate(180)");
}