update d3 pack layout from multiple json files

Question

I'm trying to update my flat circle pack layout with data from different json files. I adapted the code from this tutorial to work with my code: Updating the data of a pack layout from JSON call and redrawing

When you 'inspect element', it shows that the data is being updated, but the nodes still correlate to the first JSON file. I have a feeling it has to do with my d3.json calling back "currentUrl" instead of "currentJson". Any help would be appreciated!!

This is my generatenewdata code:

var refresh = function() {


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

node.exit().remove();

node.append("circle")
        .attr("r", 0)
        .on("click", getNewData)
        .transition()
        .duration(2000)
        .style("fill", function(d) { return color(d.packageName); })
        .attr("r", function(d) { return d.r; });

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

node.append("text")
  .style("fill", "#8fb4ae")
  .on("click", getNewData)
  .transition()
  .duration(2000)
  .attr("dy", ".3em")
  .style("text-anchor", "middle")
  .style("fill", "#000000")
  .text(function(d) { return d.className.substring(0, d.r/3); });

node.append("text")
  .style("fill", "#8fb4ae")
  .on("click", getNewData)
  .transition()
  .duration(2000)
  .attr("y", 500)
  .attr("x", 800)
  .attr("class", "year label")
  .style("fill", "#000000")
  .text(function(d) { if  ( !d.children) {return d.name ; } else { return ("hi") ; };  });

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

node.select("circle")
    .attr("r", 0)
    .on("click", getNewData)
    .transition()
    .duration(2000)
    .style("fill", function(d) { return color(d.packageName); })
    .attr("r", function(d) { return d.r; })
      });
}

Answer 1

You are appending new elements even for the existing groups that would need to be updated. Select and update the existing elements instead.

For example instead of

node.append("circle")
    // set attributes

do

node.enter().append("g")
    // ...
    .append("circle);

node.select("circle")
   // set attributes