Eu tenho andado por aí com oamostra de embalagem circular. No entanto, tenho muitos problemas para tentar atualizar o conjunto de um novo conjunto de dados JSON e atualizá-lo posteriormente.

Meu código é apenas uma versão modificada do exemplo de pacote circular:

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

Isso funciona como esperado. No entanto, quero fazer a função de atualização que atualiza o gráfico de novos dados JSON e atualiza. Eu tentei o código abaixo, mas ele simplesmente adiciona um novo elemento em vez de alterar os antigos - e também não remove os antigos (node.exit.remove () aparentemente nunca é executado). Eu estou querendo saber se isso tem a ver com o uso de "datum" em vez de "dados" e se uma junção de dados é realmente feita a esse respeito:

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

Eu tenho bastante dificuldade em descobrir exatamente como os dados estão realmente vinculados ao pacote e como atualizá-lo. Provavelmente estou sentindo falta de algo simples, mais uma vez, mas qualquer ajuda seria muito apreciada, já que tive dificuldade em encontrar uma amostra ilustrando isso. Eu ficarei feliz em fazer um depois para os outros no futuro, se alguém puder me ajudar aqui. :)

Para o registro, os dados que estou usando são os seguintes:

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

e

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