1

I'm trying to bind to multiple donut charts using d3.js.

I have a json variable

var json = [[{"label":"Value 1", "value":13}, {"label":"Value 2", "value":14}], [{"label":"value 4", "value":16},{"label":"value 5", "value":16},{"label":"value 6", "value":16}]];

I'm trying to create two dounut charts and bind the data from each json object to the respective chart.

Here's my code snippet:

var color = d3.scale.category20();
var pie = d3.layout.pie()
    .sort(null)
    .value(function(d){ return d.value;});
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
    .attr("width", width) 
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data([json]).enter().append("g");
var pieChart = gs.selectAll("path")
            .data(function(d) { return pie(d); })
          .enter().append("path")
            .attr("fill", function(d, i) { return color(i); })
            .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

But I keep getting this error:

Error: Problem parsing d="M0,-31.5A31.5,31.5 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 0,-60Z"

Error: Problem parsing d="MNaN,NaNA31.5,31.5 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 NaN,NaNZ"

Any help would be appreciated, thanks.

4
  • This question may help. Mar 4, 2014 at 17:46
  • 2
    You're nesting too many arrays. Your JSON is already an array of two arrays, when you call gs = svg.selectAll("g").data([json]) you're putting it inside another array. So you only end up creating one <g> element, containing all the data as a two-element array (each of which is a sub-arrays). When those sub-arrays get passed to the pie function's value accessor, it returns not a number, resulting in all the NaN values in the path.
    – AmeliaBR
    Mar 4, 2014 at 17:49
  • P.S., if it wasn't clear: just get rid of the extra [] in the data join, and all should work nicely...
    – AmeliaBR
    Mar 4, 2014 at 17:49
  • Thanks, taking away the [] worked perfectly Mar 4, 2014 at 17:54

1 Answer 1

0

On your pie function definition, you are returning d.value which doesn't exist. You should return the value from the nested arrays.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.