How to add a simple arc with D3

Question

I would like to add one simple arc in the chart section like a circle:

vis.append(\"circle\")
    .style(\"stroke\", \"gray\")
    .style(\"fill\", \"white\"         


        

Answer 1

D3 uses a path generator for arcs. If you don't want to data-drive your arc just define the arc generator and add some methods...

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //convert from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(50,50)")

You can see a demo here: http://jsfiddle.net/h9XNz/