faire un arc dans d3.js

Je suis l'aide de la bibliothèque javascript d3.js (http://d3js.org/) pour créer toile visualisations de données. Je suis en train de faire un arc, mais il n'est pas d'accepter les paramètres de données de mon tableau. Personne ne sait ce que je fais mal? C'est mon 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);
}

faire un arc dans d3.js

source d'informationauteur mheavers | 2012-10-03

  1. 25

    Il n'y a pas de arc élément SVG, vous devez définir le chemin d'accès approprié de l'élément. Heureusement, il existe un d3 fonction d'aide pour ce faire.

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

    Exemple de travail à http://jsfiddle.net/g0r9n090/;