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 }
    ]
}

Floatage

You are correct that .datum() doesn't compute a join. The .data() following it does though. However, in your refresh code you seem to be handling the update selection only -- there's no .enter() or .exit(). – Surbased

Thanks, I'd completely misunderstood how you also have to redraw like on the "enter()", when you update the data. – Floatage

I got it to actually work really well! Will definitely do a tutorial on this for dummies like me. If someone drops by this and is looking for an answer, feel free to contact me. – Floatage

Post your solution as an answer! – Timmerman

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

Floatage

+1 for answering your own question. Please accept your answer when you can. – Forefront

No problem. And awesome to see how active you guys are. :) – Floatage