Arc + circle

Draw circle with multiple arcs around the circle.

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
      text.siteText {
        fill:black;
        font-size:20;
      }
    </style>
  </head>

<body>  
    <script>
      var margin = {top: 20, right: 10, bottom: 20, left: 10};
      var width = 960 - margin.left - margin.right;
      var height = 500 - margin.top - margin.bottom;
      
      var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
      	
      svg.append("g")
        .attr("class","sitesClass")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
      var x=312,y=157;
      var rad=80;
      var angle=167;
      var arc = d3.svg.arc()
      .innerRadius(function(d) { 
        return isNaN( d.innerRadius ) ? 0 : d.innerRadius; 
      })
      .outerRadius(function(d) {
        return isNaN( d.outerRadius ) ? rad : d.outerRadius; 
      })
      .startAngle( function(d) {
        return isNaN( d.startAngle ) ? 0 : d.startAngle; 
      })
      .endAngle( function(d) { 
        return isNaN( d.endAngle ) ? 0 : d.endAngle; 
      });
      
      //.startAngle((angle-22)*(Math.PI/180)).endAngle((angle+22)*(Math.PI/180));
			//console.log(arc.centroid());
      
      var data = [
        {name:"obj1",x:210,y:127,r:10,records:[{azi:65,ir:10,r:80, n:2},{azi:170,ir:10,r:80},{azi:270,ir:10,r:80}]},
        {name:"obj2",x:96,y:127,r:10,records:[{azi:15,ir:10,r:80},{azi:200,ir:10,r:80},{azi:300,ir:10,r:80}]},
        {name:"obj3",x:96,y:260,r:10,records:[{azi:0,circle:1,ir:10,r:50}]}
        ];
      var scaleSecRadius = d3.scale.linear().domain([3,19]).range([5,17]);
      
			var sitesgroup = d3.selectAll('g.sitesClass')
      .datum(data)
  
      var sitegroup = sitesgroup.selectAll('g.siteClass')
      .data(function(d) {return d;});
      
      var site = sitegroup.enter()
      .append('svg:g')
      .attr("class","siteClass")
      .attr("transform", function(d) {
            return "translate("+d.x+","+d.y+")"
      });
      
      site.append('svg:circle')
      .attr('cx',0)
      .attr('cy',0)
      .attr('r',function(d) {return d.r;})
      .attr('fill','red')
      .attr('stroke','black')
      .attr('stroke-width',1);
       
      var sectorGroup = site.selectAll('g.secClass')
      .data(function(d) {
        return d.records;
      });
      
      // Create ref to sec group
      var secGroup = sectorGroup.enter()
      .append('svg:g')
      .attr("class","secGroup");
      
      // append to sec group ref
      // obj.startAngle = (d.azi-20)*(Math.PI/180);
      //  obj.endAngle = (d.azi+20)*(Math.PI/180);
      sectorGroup.append('svg:path')
      .attr('d',function(d) {
        console.log('this is d',d)
        var secSize = 40;
        var startAngle = d.circle ? 0 : (d.azi-(secSize/2))*(Math.PI/180);
        var endAngle = d.circle ? 360*(Math.PI/180) : (d.azi+(secSize/2))*(Math.PI/180);
   
        var obj = {};
        obj.innerRadius = d.ir*1.34368;
        obj.startAngle = startAngle;
        obj.endAngle = endAngle;
        obj.outerRadius = scaleSecRadius(d.r);
        return arc(obj);
      })
      .attr('fill','orange')
      .attr('stroke','black')
      .attr('stroke-width',1);

site.append('svg:text')
      .text(function(d) {return d.name;})
      .attr("class","siteText")
      .attr("fill","pink")
      .attr("stroke","green")
      .attr("stroke-width",.5)
      .attr("font-size",15)
      .attr("transform","translate(0,26)")
      .attr("text-anchor","middle");
      
    var t_anchor = function(d) {
      return d.azi > 0 && d.azi < 180 ? "start" : "end";
    }
        
    sectorGroup
      .append('svg:text')
      .text(function(d) {
        return d.azi;
      })
      .attr("fill","black")
      .attr('stroke-width',.3)
      .attr("transform", function(d) {
        var obj = {};
        obj.innerRadius = 14;
        obj.startAngle = (d.azi-20)*(Math.PI/180);
        obj.endAngle = (d.azi+20)*(Math.PI/180);
        obj.outerRadius = d.r * 2 + 2;
        var center = arc.centroid(obj);
        return "translate(" +center+ ")";
      })
      .attr("font-size",8)
      .attr("text-anchor", t_anchor);
      
    </script>
  </body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js