making an arc in d3.js

Question

I am using the javascript library d3.js (http://d3js.org/) to create canvas data visualizations. I'm trying to make an arc, but it's not accepting the data parameters from my array. Does anyone know what I'm doing wrong? This is my code:

var chartConfig = { "canvasSize" : 800 }

var radius = chartConfig.canvasSize / 2;
var pi = Math.PI;

var vis = d3.select("#chart").append("svg")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var arcData = [
  {aS: 0, aE: 45,rI:radius/2,rO:radius}
];
var arc = vis.selectAll("arc").data(arcData).enter().append("arc");
arc.attr("innerRadius", function(d){d.rI}).attr("outerRadius",function(d){d.rO}).attr("class","arc");

function degToRad(degrees){
  return degrees * (pi/180);
}

Solution

There is no arc element in SVG, you need to define the appropriate path element. Luckily there is a d3 helper function to do this.

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

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

Working example at http://jsfiddle.net/g0r9n090/;

Comments

[mheavers]

This works to return the proper value from the arcData array, but it doesn't actually draw the arc to the screen. What's missing? I've attached a screenshot of the DOM tree - the arc node is there but nothing appears.

[Bill]

Sorry about that, I just saw the immediate problem that you weren't returning values. Completely missed the part that you were trying to create an arc element. I've updated my answer with an example of creating an arc.

[luQ]

FYI: d3.svg.arc() has changed to d3.arc()