d3js堆積的條形圖未更新

Question

我正在d3js中使用堆積條形圖進行實驗，並遇到了enter exit選擇的困難。 我使用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計算與選擇有關的新數據/已存在數據/已刪除數據。 默認情況下，它通過數據索引-輸入數組的大小來執行此操作。 由於為密歇根州和俄亥俄州計算出的堆棧數據都返回了2組數據（受傷和死亡），因此D3將此視為“相同”數據，因此是update 。

如果定義鍵功能，則D3會將密歇根州和俄亥俄州的計算堆棧數據識別為“不同”數據，因此它是一個enter 。

使用按鍵功能時，首先選擇俄亥俄時，回車選擇的大小為2。 如果然后選擇密歇根州，則密歇根州的輸入選擇為2號，俄亥俄州的出口選擇為2號。