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/
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
Post a Comment