Обновление данных макета пакета из вызова JSON и перерисовка

Я играл собразец пакета круга, Тем не менее, у меня много проблем, когда я пытаюсь обновить эту вещь из нового набора данных 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 (), по-видимому, никогда не запускается). Мне интересно, имеет ли это отношение к использованию «datum» вместо «data» и действительно ли в этом отношении выполняется соединение данных:

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

Ответы на вопрос(1)

Ваш ответ на вопрос