如何在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组元素上的输入选择以正确应用输入/更新/退出模式时,这是典型的情况.但是,为了保持对象的恒定性,以及标签仍然指向正确的元素,您还需要根据感兴趣的某些数据属性(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就在这里.

如果您有兴趣,我还在博客上介绍了如何将输入/更新/退出模式应用于svg:g元素.