How to update reusable d3.js graph when data updates?

Question

I re-factored the d3.layout.pack graph example here into a reusable module. Now I want to update the graph when the data updates. But when I call the graph with the new data the new graph gets rendered on top of the old graph. You can find a demo of the issue here.

Basically, to simulate the data update I am calling a function with setinterval this way:

 function test(){
  d3.select('#vis')
  .datum(data2)
  .call(cluster);

 }

 setInterval(test, 1500);

you can find the data update section in the bottom of the file. Could you please check what's wrong?

Answer 1

There are a few problems with your code. First, your check whether the SVG exists already doesn't work because of scoping issues. The better way to do it is to select the element you want and check whether your selection is empty.

var svg = d3.select("svg > g");
if(svg.empty()){
    svg = d3.select(this).append("svg:svg").attr("width", width)
            .attr("height", height)
            .append("svg:g")
            .attr("transform", "translate(" + (width - r) / 2 + "," + (height - r) / 2 + ")");
}

Note that I've merged the appending of the g element into this, as that is what you're operating on.

Second, you need to handle the update and exit selections in addition to the enter selection. I've added that to your jsfiddle here.