通过JSON调用和重绘来更新包布局的数据 [英] Updating the data of a pack layout from JSON call and redrawing

问题描述

我一直在玩弄圈子包样品。但是，我尝试从一组新的JSON数据更新该事物并随后刷新它时遇到很多麻烦。

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.

我的代码只是一个修改版本的圆pack sample：

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

这样可以正常工作。但是，我想要执行刷新功能，从新的JSON数据更新图表和刷新。我试过下面的代码，但它只是添加新的元素，而不是改变旧的 - 也不会删除旧的（node.exit.remove（）显然从来没有运行）。我想知道它是否与使用datum而不是数据，以及是否一个数据连接实际上是这样做：

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

和

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

推荐答案

我很难理解包的工作原理。显然，你只是发送一个数据集，他们返回一个新的数据集，你可以使用绑定。比我想象的简单得多。这个解决方案的工作原理，我想大多数人应该能够从这里移动：

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

这篇关于通过JSON调用和重绘来更新包布局的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！