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

您的代碼只有「enter」選項。您錯過了「更新」選項（並最終選擇了「退出」選項）。

「更新」 的選擇可以是這樣的：

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/