Question

168

making an arc in d3.js

rated 0 times [ 170] [ 2] / answers: 1 / hits: 41577 / 12 Years ago, wed, october 3, 2012, 12:00:00

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

}

enter

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anitamaeg

Add To Favorites

Follow

Total Points: 466

Total Questions: 106

Total Answers: 106

Location: Suriname

Member since Sun, Jun 13, 2021

3 Years ago

answered 12 Years ago trayvon · Accepted Answer

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