Updating the data of a pack layout from JSON call and redrawing

Question

I've been toying around with the circle pack sample. However, I have a lot of trouble trying to update the thing from a new set of JSON data and refreshing it afterwards.

My code is just a modified version of the circle pack sample:

var diameter = 960,
    format = d3.format(",d");

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(2,2)");

var node;

d3.json("data1.json", function(error, root) {

    node = svg.datum(root).selectAll(".node")
      .data(pack.nodes);

    node.enter().append("g")
      .classed("node", true)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
      .text(function(d) { return d.name; });

    node.append("circle")
            .attr("r", 0)
        .on("click", refresh)
            .transition()
            .duration(2000)
        .attr("r", function(d) { return d.r; });

    node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name });

    node.exit()
        .remove();
});

d3.select(self.frameElement).style("height", diameter + "px");

This works as expected. However, I want to do the refresh function that updates the chart from new JSON data and refreshes. I've tried the code below but it simply adds new element instead of changing the old ones - and also does not remove the old ones (node.exit.remove() apparently never runs). I'm wondering if it has to do with the use of "datum" instead of "data" and whether a data join is actually made in that regard:

var refresh = function() {

    d3.json("data2.json", function(error, root2) {

        node = svg.datum(root2).selectAll(".node")
            .data(pack.nodes);

        node.append("title")
            .text(function(d) { return d.name; });

        node.append("circle")
            .attr("r", 0)
            .transition()
            .duration(2000)
            .attr("r", function(d) { return d.r; });

        node.append("text")
            .attr("dy", ".3em")
            .style("text-anchor", "middle")
            .text(function(d) { return d.name });
    });
}

I have quite a hard time figuring out exactly how the data is actually bound to the pack and how to update it. I'm probably missing something simple once again but any help would be greatly appreciated as I've had a hard time finding a sample illustrating this. I'll happily make one afterwards for others in the future if someone can help me out here. :)

For the record, the data I'm using is this:

{
    "name": "Names",
    "children": [
        { "name": "John", "size": 100 },
        { "name": "Peter", "size": 200 },
        { "name": "Arnold", "size": 300 },
        { "name": "Rasmus", "size": 400 }
    ]
}

and

{
    "name": "Names",
    "children": [
        { "name": "John", "size": 1000 },
        { "name": "Rasmus", "size": 200 },
        { "name": "Benjamin", "size": 300 },
        { "name": "James", "size": 400 }
    ]
}

Answer 1

I had a hard time understanding how the packs work. Apparently, you just send them a dataset and they return a new dataset that you can use for binding. Much simpler than I'd thought. This solution works and I think most people should be able to move on from here:

var diameter = 960,
    format = d3.format(",d");

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(2,2)");

var node;
var currentJson;
var currentUrl = "data1.json";

var getNewData = function() {

    if(currentUrl == "data1.json") {
        currentUrl = "data2.json";
    }
    else {
        currentUrl = "data1.json";
    }

    d3.json(currentUrl, function(error, data) {
        currentJson = data;
        refresh();
    });
}

var refresh = function() {

    node = svg.selectAll(".node")
                    .data(pack.nodes(currentJson));

    node.enter().append("g")
            .classed("node", true)
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .append("circle")
            .attr("r", 0)
            .on("click", getNewData)
            .transition()
            .duration(2000)
            .attr("r", function(d) { return d.r; });

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

    node.select("circle")
        .transition()
        .duration(2000)
        .attr("r", function(d) { return d.r; });
}

d3.select(self.frameElement).style("height", diameter + "px");

getNewData();