Is it possible to create pie charts with the consistency of objects?

Question

An example of updating a pie chart on bl.ocks does not update in-place elements:

http://bl.ocks.org/j0hnsmith/5591116

function change() { clearTimeout(timeout); path = path.data(pie(dataset[this.value])); // update the data // set the start and end angles to Math.PI * 2 so we can transition // anticlockwise to the actual values later path.enter().append("path") .attr("fill", function (d, i) { return color(i); }) .attr("d", arc(enterAntiClockwise)) .each(function (d) { this._current = { data: d.data, value: d.value, startAngle: enterAntiClockwise.startAngle, endAngle: enterAntiClockwise.endAngle }; }); // store the initial values path.exit() .transition() .duration(750) .attrTween('d', arcTweenOut) .remove() // now remove the exiting arcs path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs } 

Instead, it simply treats the new array of values ​​as new data and resizes the chart accordingly.

I created a fiddle demonstrating the problem very simply:

http://jsfiddle.net/u9GBq/23/

If you press 'add', it will add a random int to the array: this works as intended.

If you click 'remove', the only element to be displayed will be the last element to go into pie. In short, it behaves like a LIFO stack. The expected behavior is that the corresponding circular arc will be drawn in its place.

Is it possible to apply the consistency of an object to cakes? I also tried to add a key function (not shown on the violin), but it just breaks (oddly enough, this works fine with my stacked graphs).

Thanks.

Answer 1

The easiest solution to this problem is to set the missing values ​​to zero , and not completely delete them, as in Part III Example Pie Chart chart . Then you get the persistence of the object for free: you have the same number of elements in the same order for updates.

Alternatively, if you want the data connection to be included in Part IV , you need to tell D3 where the arcs from and where the output arcs should go to are entered . A reasonable strategy is to find the nearest neighboring arc from opposite data: for a given incoming arc, find the nearest neighboring arc in the old data (preliminary transition); similarly for a given outgoing arc, find the nearest adjacent arc in the new data (post-transition).

To continue the example, say that you show apple sales in different regions and want to switch to showing oranges. You can use the following key function to keep the object constant:

 function key(d) { return d.data.region; } 

(This assumes you are using d3.layout.pie , which wraps your source data and provides it as d.data .)

Now tell me, when you go to oranges, you have the following old data and new data:

 var data0 = path.data(), // retrieve the old data data1 = pie(region.values); // compute the new data 

For each input arc in index i (where d is data1[i] ), you can sequentially execute the previous data in data1 and see if a match can be found in data0 :

 var m = data0.length; while (--i >= 0) { var k = key(data1[i]); for (var j = 0; j < m; ++j) { if (key(data0[j]) === k) return data0[j]; // a match! } } 

If you find a match, your inbound arcs can start at the corresponding angle at the end of the arc. If you do not find the previous match, you can search instead for the corresponding arc. If there are no matches, then they do not overlap between the two data sets, so you can enter arcs from an angle of 0 ° or make a crossfade. You can also apply this technique to exit arcs.

Putting it all together, heres Part V :

Answer 2

Ok, found a solution. The trick was to pass the key in this way:

 path = path.data(pie(dataset), function (d) {return d.data}); // this is good 

as opposed to not transmitting it, or transmitting it wrong:

 path = path.data(pie(dataset, function (d) {return d.data})); // this is bad 

And here is the updated violin with a working transition to the right arc! :)

http://jsfiddle.net/StephanTual/PA7WD/1/