d3js：exitメソッドを使用して最初のバーが消えないのはなぜですか？

Question

私は単純な棒グラフを作成し、ユーザーのクリックに反応させようとしています。クリックされたバーは消えています。最初のバーをクリックすると、最後のバーが消えてしまいます。私はこれがなぜそうであるのか完全に迷っており、本当に助けに感謝します。

Plunkrの完全なコード：

https://plnkr.co/edit/H8K0ISdhGrb5HirrX2MG?p=preview

ユーザーがバーをクリックしたとき、私は更新機能を呼び出します。私はremovefromarray関数を作成して、データオブジェクトから、クリックされたバーにバインドされたデータを返します。 ：

d3.tsv("CantTouchThis.tsv",function(d,i){ 
d.FieldGoals = +d.FieldGoals; 
return d; 

}, function(error,data){ 
if (error) throw error; 
y.domain([0,d3.max(data, function(d){return d.FieldGoals})]); 
x.domain(data.map(function(d){return d.Player}));data used as the x attribute 

function update(indx){ 

var selection = g.selectAll(".bars") 
    .data(data.removefromarray(indx), function(d){console.log('d');console.log(d); return d}) //printing d shows the previous bars and new bars are being returned, I suspect this may be causing the problem, but not sure 

selection.enter().append("rect") 
    .attr("class","bars") 
    .attr("width",function(d){return x.bandwidth()}) 
    .attr("x",function(d){return x(d.Player)}) 
    .attr("height",function(d){return height - y(d.FieldGoals)}) 
    .attr("y",function(d){return y(d.FieldGoals)}) 
    .on("click",function(d,i){update(i);}); 

console.log(selection.enter()) 

console.log(selection.exit()) 

selection.exit().remove() 

} 

Answer 1

解決策1：あなたは、 "更新" を選択し行方不明：

ここ

selection.attr("width",function(d){return x.bandwidth()}) 
    .attr("x",function(d){return x(d.Player)}) 
    .attr("height",function(d){return height - y(d.FieldGoals)}) 
    .attr("y",function(d){return y(d.FieldGoals)}) 
    .on("click",function(d,i){update(i);}); 

あなたの更新plunkerです：https://plnkr.co/edit/qJY5KgY9FBvuJ8krddYm?p=preview

解決方法2：別の非常に簡単な解決策（つまり、正しくアドレスがあなたの質問"最初のバーは終了方法を使用して消えないのですか？"）：データバインディングの選択に適切なキーを使用してください：

var selection = g.selectAll(".bars") 
    .data(data.removefromarray(indx), function(d){ return d.Player}); 
    //     this is the proper key function ---^ 

ただし、この「解決策」はすべてのクリックで機能しないことにご注意ください。これは、データオブジェクトを削除する方法（拡張プロトタイプのスプライスを使用）がではなく、が正しく機能するためです。 https://plnkr.co/edit/rVTinxx45nmBvFiWwqgg?p=preview

PS：ここ

は、別の更新plunkerであるあなたが欲しい（ともD3コードへのより適切な）何をすべきかの方法より簡単な方法があります。