javascript - JSON 呼び出しと再描画からパック レイアウトのデータを更新する

Question

サークルパックのサンプルをいじっています。しかし、JSON データの新しいセットから物事を更新し、後で更新しようとすると、多くの問題が発生します。

私のコードは、サークル パックのサンプルを修正したものです。

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() は明らかに実行されません)。「データ」の代わりに「データム」を使用することに関係があるのか​​ 、その点でデータ結合が実際に行われているかどうか疑問に思っています:

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

データが実際にパックにどのようにバインドされているか、およびそれを更新する方法を正確に理解するのに非常に苦労しています。私はおそらくもう一度単純なものを見逃していますが、これを説明するサンプルを見つけるのに苦労したので、どんな助けでも大歓迎です. 誰かがここで私を助けてくれれば、将来他の人のために喜んで作成します. :)

記録のために、私が使用しているデータは次のとおりです。

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