如何在 d3.js 中更新气泡图？

Question

我设法创建了一个气泡图，当它是单个数据集时效果很好。但是如果我需要用其他数据集更新它，就会出现问题。请在http://jsfiddle.net/9jL64/ 帮助我更新功能。

function changebubble(root)
{
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }));

  node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });  
  node.select("circle")
    .transition()
    .duration(1000)
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d,i) { return color(i); });

   node.transition().attr("class", "node")
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

   node.append("circle")            
     .attr("r", function (d) { return d.r; })
     .style("fill", function (d, i) { return color(i); });

   node.exit()
     .remove();

// 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: name, className: node.name, value: node.size});
  }

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

Answer 1

这是您需要捕获svg:g 组元素上的输入选择以正确应用输入/更新/退出模式的经典案例。但是，为了保持object constancy，并且您的标签仍然指向正确的元素，您还需要根据一些感兴趣的数据属性（d.className，从d.name 生成）来键入您的数据。

这是您修改后的气泡更新功能的主要部分：

var node = svg.selectAll(".node")
    .data(
        bubble.nodes(classes(root)).filter(function (d){return !d.children;}),
        function(d) {return d.className} // key data based on className to keep object constancy
    );

// capture the enter selection
var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

// re-use enter selection for circles
nodeEnter
    .append("circle")
    .attr("r", function (d) {return d.r;})
    .style("fill", function (d, i) {return color(i);})

// re-use enter selection for titles
nodeEnter
    .append("title")
    .text(function (d) {
        return d.className + ": " + format(d.value);
    });

完整的FIDDLE 在这里。

如果您有兴趣，我也会 blogged 讨论将进入/更新/退出模式应用于 svg:g 元素的问题。