0

I want to draw a D3 pie chart. Initially the arc segments will be hidden, then I want to animate them sequantially one by one to make them visible in response to keyboard/mouse events from the application flow.

The application flow is a linear: E.g. part 1, animate first arc segment to make it visible. Part 2, animate second segment to make it visible. Part 3, etc. until the pie is completely visible.

I'm interested in using the Swiper project - http://www.idangero.us/swiper/api/#.VqemYVOLQmI - so moving to each slide would trigger an event that would make an arc visible (i.e. onSlideChangeEnd would show each sequential arc)

One approach I could take would be to draw the pie segment as initially invisible, then use a style transition to make it visible:

d3.selectAll(“.segment1”).transition().duration(500).style("fill", "#7FB9E6”);

This could make each sequential arc visible in response to each event.

However that’s not quite the look I’m going for - I want the animation on the fill of the arc to appear like it’s moving from left to right, e.g. in this kind of "sweep" animation: http://jsfiddle.net/thmain/xL48ru9k/1/

Is this kind of animation possible to use if I’m not updating data using D3 (i.e. the chart is already created, I just want the arcs to appear sequentially in response to an event).

I'm new to animation / tweening so help is appreciated. Thanks.

Benjamin
  • 683
  • 1
  • 8
  • 22
  • 1
    See https://stackoverflow.com/questions/20501067/animating-d3-donut-chart-on-load and https://stackoverflow.com/questions/20355952/is-it-possible-to-start-a-d3js-pie-chart-with-all-values-being-0 – Lars Kotthoff Jan 26 '16 at 18:34

2 Answers2

0

One idea is to initialize the chart with all the values initially set to zero. Then, as your user swipes through your content, just update each element as needed with each items' respective data value.

I think (I haven't tried it) that it would create a 'bumping' effect, where each time a user swipes (or whatever the function call is) the chart's slices would 'add' a slice and resize the visible slices' portion of the data shown (if that makes sense).

Nick Malawskey
  • 51
  • 6
0

The easiest way is probably to leverage the d3.svg.arc shape directly (a pie chart is merely a "helper" for creating many of these). If you know what the total of the data is, you can calculate the angle of each arc individually, and show/hide/animate them at will.

Mike Lewis
  • 348
  • 4
  • 14