How to Update bubble chart in d3.js?

Question

I managed to create a bubble chart which works fine when it is a single dataset. But something goes wrong if I need to update it with other datasets. Please help me with my update function at 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

This is the classic case when you need to capture the enter selection on the svg:g group element in order to apply the enter/update/exit pattern correctly. But, to keep object constancy, and so that your labels still point to the right elements, you also need to key your data based on some data property of interest (d.className, which is generated from d.name).

Here is the main segment of your revised bubble update function:

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);
    });

The complete FIDDLE is here.

I also blogged on the matter of applying the enter/update/exit pattern to svg:g elements, if you are interested.