D3 V4 Общий шаблон обновления для компоновки пакетов

Question

Я пытаюсь использовать общий шаблон для обновления макета пакета, но не был успешным. Ниже моя скрипка. Поэтому, когда нажимается Randomize Data, данные должны обновляться.

Это мой полный fiddle.

function update() { 
    root = d3.hierarchy(data) 
     .sum(function(d) { 
     return d.size; 
     }) 
     .sort(function(a, b) { 
     return b.value - a.value; 
     }); 

    var node = g.selectAll(".node") 
     .data(pack(root).descendants()) 
     .enter().append("g") 
     .attr("class", function(d) { 
     return d.children ? "node" : "leaf node"; 
     }) 
     .attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
     }); 

    node.append("title") 
     .text(function(d) { 
     return d.data.name + "\n" + format(d.value); 
     }); 

    node.append("circle") 
     .attr("r", function(d) { 
     return d.r; 
     }); 

    node.filter(function(d) { 
     return !d.children; 
    }).append("text") 
     .attr("dy", "0.3em") 
     .text(function(d) { 
     return d.data.name.substring(0, d.r/3); 
     }); 
} 

Answer 1

Ваш код имеет только «ввод». Вам не хватает выбора «обновления» (и, в конце концов, выбор «exit»).

Выбор "обновление" может быть что-то вроде этого:

var nodeUpdate = g.selectAll(".node") 
    .attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    });; 

var circleUpdate = nodeUpdate.select("circle") 
    .attr("r", function(d) { 
     return d.r; 
    }); 

Проверьте скрипку: https://jsfiddle.net/or7pLnjp/