javascript - d3.js气泡图动画

Question

我正在开发一个气泡图应用程序。不过目前 - 我的图表似乎坏了，不知道为什么。

当新数据集出现时，我会尝试制作气泡动画。

http://jsfiddle.net/NYEaX/175/

setup: function(rawData, w, h){ 

            var format = d3.format(",d"),
            color = d3.scale.category20c();

            var bubble = d3.layout.pack()
                .sort(null)
                .size([w, h])
                .padding(1.5);

            var svg = d3.select(methods.el).append("svg")
                .attr("width", w)
                .attr("height", h)
                .attr("class", "bubblechart")
                .attr('viewBox', "0 0 "+parseInt(w, 10)+" "+parseInt(h, 10))
                .attr('perserveAspectRatio', "xMinYMid");

            var root = methods.conformData(rawData);

            var node = svg.selectAll(".node")
              .data(bubble.nodes(classes(root))
              .filter(function(d) { return !d.children; }))
            .enter().append("g")
              .attr("class", "node")
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

            node.append("title")
              .text(function(d) { return d.className + ": " + format(d.value); });

            node.append("circle")
              .attr("r", function(d) { return d.r; })
              .style("fill", function(d) { return color(d.packageName); });
            node.append("text")
              .attr("dy", ".3em")
              .style("text-anchor", "middle")
              .text(function(d) { return d.className.substring(0, d.r / 3); });

            // Returns a flattened hierarchy containing all leaf nodes under the root.
            function classes(root) {
              var classes = [];
              function recurse(name, node) {
                if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
                else classes.push({packageName: node.name, className: node.name, value: node.size});

              recurse(null, root);
              return {children: classes};
            }

                        d3.select(self.frameElement).style("height", h + "px"); 

            //this.resizeBubble();
        }

Answer 1

这是最新的气泡图代码。虽然它没有为多个图表正确更新

http://jsfiddle.net/pPMqQ/18/

animateBubbles: function(selector, data){
data = this.funnelData(data, methods.width, methods.height);

                                var padding = 4;
                                var maxRadius = d3.max(data, function (d) { return parseInt(d.radius)});


                                var year_centers = {
                                  "2008": {name:"2008", x: 150, y: 300},
                                  "2009": {name:"2009", x: 550, y: 300},
                                  "2010": {name:"2010", x: 900, y: 300}
                                }

                                var all_center = { "all": {name:"All Grants", x: methods.width/2, y: methods.height/2}};


                        var bubbleholder = d3.select(selector + " .bubbleholder");


                        var bubbles = d3.select(selector + " .bubbles");

                        var labelbubble = d3.select(selector + " .labelbubble");



                                var nodes = bubbles.selectAll("circle")
                                  .data(data);


                                // Enter
                                nodes.enter()
                                    .append("circle")
                                     .attr("class", "node")
                                      .attr("cx", function (d) { return d.x; })
                                      .attr("cy", function (d) { return d.y; })
                                      .attr("r", 1)
                                      .style("fill", function (d) { return methods.fill(d.label); })
                                      .call(methods.force.drag);

                                // Update
                                nodes
                                    .transition()
                                    .delay(300)
                                    .duration(1000)
                                      .attr("r", function (d) { return d.radius; })

                                // Exit
                                nodes.exit()
                                    .transition()
                                    .duration(250)
                                    .attr("cx", function (d) { return d.x; })
                                    .attr("cy", function (d) { return d.y; })
                                    .attr("r", 1)
                                    .remove();

                                var labels = labelbubble.selectAll("text")
                                  .data(data);              


                                // Enter
                                labels.enter()
                                    .append("text")
                                     .attr("class", "title")
                                        .text(function(d) { return d.label; })                               
                                        .attr("x", function (d) { return d.x; })
                                        .attr("y", function (d) { return d.y; })

                                // Update
                                labels
                                    .transition()
                                    .delay(300)
                                    .duration(1000)
                               // .attr("x", function (d) { return d.x; })
                                //.attr("y", function (d) { return d.y; })

                                // Exit
                                labels.exit()
                                    .transition()
                                    .duration(250)
                                    .remove();    


                                draw('all');


                                function draw (varname) {
                                    var foci = varname === "all" ? all_center: year_centers;
                                  methods.force.on("tick", tick(foci, varname, .55));
                                  methods.force.start();
                                }

                                function tick (foci, varname, k) {
                                  return function (e) {
                                    data.forEach(function(o, i) {
                                      var f = foci[o[varname]];
                                      o.y += (f.y - o.y) * k * e.alpha;
                                      o.x += (f.x - o.x) * k * e.alpha;
                                    });
                                    nodes
                                      .each(collide(.1))
                                      .attr("cx", function (d) { return d.x; })
                                      .attr("cy", function (d) { return d.y; });

                                      labels
                                      .each(collide(.1))
                                      .attr("x", function (d) { return d.x; })
                                      .attr("y", function (d) { return d.y; });

                                  }
                                }




                                function collide(alpha) {
                                  var quadtree = d3.geom.quadtree(data);
                                  return function(d) {
                                    var r = d.radius + maxRadius + padding,
                                        nx1 = d.x - r,
                                        nx2 = d.x + r,
                                        ny1 = d.y - r,
                                        ny2 = d.y + r;
                                    quadtree.visit(function(quad, x1, y1, x2, y2) {
                                      if (quad.point && (quad.point !== d)) {
                                        var x = d.x - quad.point.x,
                                            y = d.y - quad.point.y,
                                            l = Math.sqrt(x * x + y * y),
                                            r = d.radius + quad.point.radius + padding;
                                        if (l < r) {
                                          l = (l - r) / l * alpha;
                                          d.x -= x *= l;
                                          d.y -= y *= l;
                                          quad.point.x += x;
                                          quad.point.y += y;
                                        }
                                      }
                                      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
                                    });
                                  };
                                }                           

                    },