D3, animation of a bubble chart in a given radius

Question

// database of bubbles. http://jsfiddle.net/NYEaX/1450/

I try to revive the bubbles - by changing their scale - and, if possible, fade them out. At some point, I need to group them with some kind of gravity in order to occupy more surroundings.

(function() { var diameter = 250; var svg = d3.select('#graph').append('svg') .attr('width', diameter) .attr('height', diameter); var bubble = d3.layout.pack() .size([diameter, diameter]) .value(function(d) { return d.size; }) .padding(3); var color = d3.scale.ordinal() .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"]) .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]); function randomData() { var data1 = { "children": [ { name: "AA", className: "aa", size: 170 }, { name: "BB", className: "bb", size: 393 }, { name: "CC", className: "cc", size: 293 }, { name: "DD", className: "dd", size: 89 } ] }; var data2 = { "children": [ { name: "AA", className: "aa", size: 120 }, { name: "BB", className: "bb", size: 123 }, { name: "CC", className: "cc", size: 193 }, { name: "DD", className: "dd", size: 289 } ] }; var j = Math.floor((Math.random() * 2) + 1); console.log("j", j); if (j == 1) { return data1; } else { return data2; } } change(randomData()); d3.select(".randomize") .on("click", function() { change(randomData()); }); function change(data) { console.log("data", data); // generate data with calculated layout values var nodes = bubble.nodes(data) .filter(function(d) { return !d.children; }); // filter out the outer bubble var vis = svg.selectAll('circle') .data(nodes); vis.enter() .insert("circle") .attr('transform', function(d) { return 'translate(' + dx + ',' + dy + ')'; }) .attr('r', function(d) { return dr; }) .style("fill", function(d) { return color(d.name); }) .attr('class', function(d) { return d.className; }); vis .transition().duration(1000) vis.exit() .remove(); }; })(); 

Answer 1

These animated bubbles will become part of this overall graph - I need support in fine-tuning the animated arcs and bubbles accordingly. Therefore, the arcs of the pie chart should rotate smoothly - and the bubbles should disappear in / out / grow radius / decrease radius

The last violin. http://jsfiddle.net/NYEaX/1505/

( http://jsfiddle.net/NYEaX/1506/ ) - reorganized

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

---

this is an old pie animation and worked very 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 -------*/ 

// these are the current peak arcs, but when I try to animate the cake in the same way, it 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); 

Answer 2

Try animating the pie chart first, and then view the bubble animation