javascript - d3 doughpie/bubble chart combo with animation tweening -


i have created chart in static form - how needs -- i've lost animation , morphing along way ---

   1. -- how animate arcs    2. -- how animate bubbles    3. -- adding randomise button test 2 dummy data sets. 

i need arcs tween did before -- http://jsfiddle.net/nyeax/1452/

enter image description here

latest fiddle. http://jsfiddle.net/nyeax/1506/


this old pie animations , worked well

                /* ------- animate pie slices -------*/                 var slice = doughpie.select(".slices").selectall("path.slice")                   .data(pie(data), key);                  slice.enter()                   .insert("path")                   .style("fill", function(d) {                     return color(d.data.label);                   })                   .style("transform", function(d, i){                     //return "translate(0, 0)";                   })                   .attr("class", "slice");                  slice                   .transition().duration(1000)                   .attrtween("d", function(d) {                     this._current = this._current || d;                     var interpolate = d3.interpolate(this._current, d);                     this._current = interpolate(0);                     return function(t) {                       return arc(interpolate(t));                     };                   })                  slice.exit()                   .remove();                 /* ------- animate pie slices -------*/ 

//this current pie arcs - when try , animate pie in same manner - fails.

var g = svg.selectall(".arc")   .data(pie(data))   .enter().append("g")   .attr("class", "arc");  g.append("path")   .attr("d", arc)   .style("fill", function(d) {     return color(d.data.label);   });  arc   .outerradius(radius - 10)   .innerradius(0); 


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -