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

Answer 1

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/;