D3 V4パックレイアウトの一般的な更新パターン

Question

一般的なパターンを使用してパックレイアウトを更新しようとしていますが、まだ成功していません。以下は私のバイブルです。したがって、データのランダム化をクリックすると、データが更新されます。

ここは私のフル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

コードには「入力」の選択肢しかありません。あなたは "更新"の選択（そして最終的に "終了"の選択）が欠落しています。

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/

"更新" 選択は、このようなものになることができます