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来键入数据，该属性是从{{1}生成的}}）。

以下是修订后的冒泡更新功能的主要部分：

d.name

完整的FIDDLE就在这里。

如果您感兴趣的话，我还blogged关于将输入/更新/退出模式应用于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); });元素的问题。

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

1 个答案: