數據連接d3.stack.layout（）

Question

我創建了一個plunk來演示我的問題。

問題是我的.enter（），update（），exit（）方法不適用於我的d3.chart.layout（）可視化。

相反，我得到了經典的「雙後」問題。然而，我的鑰匙是一樣的。

我想要發生的是我的d3蒸汽圖更新其數據（這樣y值全部變爲0，圖表消失）。我的數據綁定正常編碼：

var steam = svg.selectAll(".layer") 
    .data(layers, function(d){console.log(d); return d.key}) 

steam.enter().append("path") 

steam.style("fill", function(d, i) { return z(i); }).style("opacity","0").transition().duration(400) 
    .style("opacity","1") 
    .attr("class", "layer") 
    .attr("d", function(d) { return area(d.values); }) 

steam.exit().transition().duration(500).remove() 

發生了什麼/有什麼想法？

Answer 1

所以我就開始工作了，儘管我仍然對它爲什麼這樣工作感到困惑。我需要將svg添加到更新函數中並添加到名稱空間中（這很明顯）。

但是更新變成了這個，帶有transition（）方法。任何人都可以幫助我瞭解我出錯的地方嗎？

test = svg.selectAll("path").data(layers, function(d){return d.key}) 

     test.enter().append("path") 

     test.style("opacity",1).style("fill", function(d, i) { return z(i); }) 
     .attr("class", "layer").transition() 
     .duration(2000) 
     .attr("d", function(d) { return area(d.values); }); 

     test.exit().transition().duration(1500).style("opacity",0).remove();