7

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 }
    ]
}
VividD
  • 10,456
  • 6
  • 64
  • 111
Alex Langberg
  • 163
  • 1
  • 8
  • 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()`. – Lars Kotthoff Sep 13 '13 at 18:20
  • Thanks, I'd completely misunderstood how you also have to redraw like on the "enter()", when you update the data. – Alex Langberg Sep 13 '13 at 20:33
  • 1
    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. – Alex Langberg Sep 13 '13 at 22:00
  • 1
    Post your solution as an answer! – Adam Pearce Sep 13 '13 at 22:13

1 Answers1

8

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();
Alex Langberg
  • 163
  • 1
  • 8