CODEWITHSUNDEEP
javascriptd3.jsupdates
spleedo
spleedo

Reputation: 21

Updating a pie chart with a new data set with more values

I'm relatively new to D3 and have been following a few pie chart tutorials.

Namely the Mike Bostock Tutorials. http://bl.ocks.org/mbostock/1346410

But I have question about a donut chart updating from one data set to another with the 2nd data set having much more values than the first.

I have attempted this numerous times through an update function but no luck, I'll keep it simple and give a hypothetical example , lets say my first data set had 5 values

[1,2,3,4,5]

and my second data set had 10 values

[1,2,3,4,5,6,7,8,9,10]

only 5 values of the new data set would be depicted on the arcs after the dynamic update. It's like the pie is fixed with only 5 arc sections being able to display 5 values of the new dataset.

Any help would be appreciated as its been stumbling around with the idea for awhile!

Upvotes: 0

Views: 1085

Answers (2)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The key to making it work with data of different size is to handle the .enter() and .exit() selections. This tutorial goes into more detail, but briefly the enter selection represents data for which no DOM elements exist (e.g. in the case where you pass in more data), the update selection (which you're already handling) represents data for which DOM elements exist and the exit selection DOM elements for which no data exists anymore (e.g. when you have more elements to start with).

So in your change function, you would need to do something like this.

function change() {
  clearTimeout(timeout);

  var path = svg.datum(data).selectAll("path")
    .data(pie);
  path.enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .each(function(d) { this._current = d; }); // add the new arcs
  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  path.exit().remove(); // remove old arcs
}

This assumes that you're updating your data variable as you suggest above instead of getting a different value from the existing data structure as in the example.

Upvotes: 1

tomtomtom
tomtomtom

Reputation: 1522

Here I made a simple update that triggers when you click the text above the pie chart: JsFiddle
The main thing happening is all the data is updated when the .on("click") event triggers, so the chart gets updated like so:

d3.select("#update")
.on("click", function (d) {
    data = [1,2,3,4,5,6,7,8,9,10];
    vis.data([data]);
    arc = d3.svg.arc().outerRadius(r);
    pie = d3.layout.pie().value(function(d){return d; });
    arcs.data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice")
        .append("svg:path")
        .attr("fill", function(d, i){return color(i);}).attr("d", arc);
});

Upvotes: 0

Related Questions