haciendo un arco en d3.js

Question

Estoy usando la biblioteca javascript d3.js (http://d3js.org/) para crear visualizaciones de datos de lienzo. Estoy intentando hacer un arco, pero no estoy aceptando los parámetros de datos de mi matriz. ¿Alguien sabe lo que estoy haciendo mal? Este es mi código:

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

Answer 1

No hay ningún elemento arc en SVG, es necesario definir el elemento de ruta adecuada. Afortunadamente hay una función de ayudante d3 para hacer esto.

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

Ejemplo de trabajo en http://jsfiddle.net/g0r9n090/;