d3js堆積條形圖不更新

Question

我有一個堆積柱形圖d3js試驗跑進enterexit選擇的困難。我用d3.stack得到兩個數組按鍵，然後我試圖按照一般的更新模式。我現在遇到的問題是，當我點擊下拉菜單中的其他狀態時，數據沒有更新。這裏的問題代碼和完整的項目鏈接：http://plnkr.co/edit/8N8b2yUYRF9zqRkjkIiO?p=preview

var series = g.append("g") 

var seriesready = 
    series.selectAll("g") 
    .data(stack(data)) 
    .enter().append("g") 
    .attr("fill",function(d){console.log(d); return z(d.key)}) //not logging 
when I update the bar chart 

var rectangles = 
    seriesready.selectAll("rect") 
    .data(function(d){return d}) 

rectangles.exit().remove() 

rectangles.enter().append("rect") 
     .attr("width", x.bandwidth()) 
     .transition() 
     .duration(1500) 
     .attr("transform", function(d) {console.log(d); return "translate(" + x(d.data.Date) + ",0)"; }) 
     .attr("height", function(d) { 
     return height - y(d[1]-d[0]); 
     }) 
     .attr("y", function(d) { 
     return y(d[1]-d[0]); 
     }); 

我也覺得我越來越困惑，選擇應該被刪除什麼或添加。真的很感激任何指針。數據是有趣的工作，但我還沒有完全掌握數據綁定。

Answer 1

我還沒有切換到版本4，但數據綁定方法是相同的，我認爲。

您需要定義一個關鍵功能作爲第二個參數.data()功能。

可以指定一個關鍵函數來控制將哪個數據分配給哪個元素，取代默認的以索引爲單位的連接。

https://github.com/d3/d3-selection/blob/master/README.md#selection_data

---

你更新的代碼

http://plnkr.co/edit/wwdjJEflZtyACr6w9LiS?p=preview

更改後的代碼：

var seriesUpdate = series.selectAll("g") 
     .data(stack(data),d=>d) 
var seriesready = seriesUpdate.enter().append("g") 
     .attr("fill",function(d){return z(d.key)}) 

seriesUpdate.exit().remove() 

當綁定的數據元素，D3計算什麼DAT a是與選擇相關的新/已存在/已刪除的。默認情況下，它通過數據索引 - 輸入數組的大小來完成此操作。由於密歇根和俄亥俄州的計算堆棧數據都返回了2組數據（受傷和死亡），因此D3將其視爲「相同」數據，因此它是update。

如果您定義了一個關鍵函數，D3會將michigan和ohio的計算堆棧數據識別爲「不同」數據，因此它是一個enter。

有了一個關鍵功能，當您首先選擇俄亥俄州時，俄亥俄州的輸入選擇大小爲2。如果你選擇密歇根州，密歇根州的輸入選擇是2號，而俄亥俄州的輸出選擇是2號。