d3給定半徑內的動畫氣泡圖

Question

//氣泡圖基地。 http://jsfiddle.net/NYEaX/1450/

我想通過改變它們的比例來動畫氣泡 - 如果可能的話，淡入淡出。在某個階段，我需要用某種重力將它們聚集在一起，以佔據更多的周圍環境。

(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(' + d.x + ',' + d.y + ')'; 
     }) 
     .attr('r', function(d) { 
     return d.r; 
     }) 
     .style("fill", function(d) { 
     return color(d.name); 
     }) 
     .attr('class', function(d) { 
     return d.className; 
     }); 

    vis 
     .transition().duration(1000) 

    vis.exit() 
     .remove(); 

    }; 

    })(); 

Answer 1

這些動畫氣泡將成爲此整體圖表的一部分 - 我需要支持相應地微調動畫弧和氣泡。所以餅圖弧線應該順利補間 - 和氣泡應該淡入/淡出/半徑增加/減少半徑

最新的小提琴。 http://jsfiddle.net/NYEaX/1505/

（http://jsfiddle.net/NYEaX/1506/） - 重構

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. 

---

這是老派動畫，效果很不錯

   /* ------- 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 -------*/ 

//這是當前餡餅弧 - 但是當我嘗試和以相同的方式動畫派 - 它失敗了。

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

嘗試和第一動畫餅圖，然後查看泡沫動畫