javascript - Updating the data of a pack layout from JSON call and redrawing - Stack Overflow

admin管理员组

文章数量:1389360

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

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

• javascript
• json
• d3.js
• circle-pack

Share Improve this question Follow edited Jun 24, 2014 at 23:51 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Sep 13, 2013 at 16:21 Alex LangbergAlex Langberg 16311 silver badge88 bronze badges 4

• You are correct that .datum() doesn't pute 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 Commented Sep 13, 2013 at 18:20
• Thanks, I'd pletely misunderstood how you also have to redraw like on the "enter()", when you update the data. – Alex Langberg Commented Sep 13, 2013 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 Commented Sep 13, 2013 at 22:00
• 1 Post your solution as an answer! – Adam Pearce Commented Sep 13, 2013 at 22:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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();

本文标签： javascriptUpdating the data of a pack layout from JSON call and redrawingStack Overflow