Skip to content Skip to sidebar Skip to footer

Is It Possible To Start A D3js Pie Chart With All Values Being 0?

I'm making a simple tool to display a set of values that are manipulated by the user. I want all the values to start at 0 and when the data is manipulated, to grow from there. I ha

Solution 1:

The problem is a conceptual one -- if everything is 0, how are you going to draw a pie chart? You could however start with an empty data set and add new data as it becomes greater than zero. That leaves the problem of animating the growth of a pie chart segment from 0 to its desired size.

For this, you can animate the end angle of the pie chart segments starting at the start angle. The easiest way to do this is to copy the corresponding data object and tween the angle:

.each(function(d) {
    this._current = JSON.parse(JSON.stringify(d));
    this._current.endAngle = this._current.startAngle;
})
.transition().duration(dur).attrTween("d", arcTween);

Random example here.

Post a Comment for "Is It Possible To Start A D3js Pie Chart With All Values Being 0?"