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.

user3379900
  • 21
  • 2
  • [This question](http://stackoverflow.com/questions/17507728/d3-js-donut-charts-with-multiple-rings) may help. – Lars Kotthoff Mar 04 '14 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 `` 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 04 '14 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 04 '14 at 17:49
  • Thanks, taking away the [] worked perfectly – user3379900 Mar 04 '14 at 17:54

1 Answers1

0

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

Yonet
  • 106
  • 4