d3js積み重ね棒グラフが更新されない

Question

d3jsの積み上げ棒グラフで実験していて、enterexitの選択に問題があります。私はd3.stackを使ってキーで整理された2つの配列を取得し、次に一般的な更新パターンに従おうとしました。私が今行っている問題は、ドロップダウンメニューで別の状態をクリックすると、データが更新されないということです。ここでは、問題のコードと完全なプロジェクトへのリンクがあります：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()関数の2番目のパラメータとしてキー関数を定義する必要があります。

に割り当てられているデータを制御するキー機能を指定し、デフォルトのjoin-by-indexを置き換えます。

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になります。