D3.js - 1つを除く他の棒の削除

Question

d3.jsを使用して、棒グラフを作成しました。しかし、私がしたいことは、クリックしたものを除いて、すべてのバーが切り替わることです。

私の遷移では、を介して行われ

：私はこれが出て移行するように変更するにはどうすればよい

bars 
    .transition() 
    .attr('height', 0) 
    .attr('y', height) 
    .duration(300) 
    .delay(function(d, i) { 
    return i * delay; 
    }); 

使用して指定され

bars 
    .attr('height', 0) 
    .attr('y', height) 
    .style('fill-opacity', 1) 
    .transition() 
    .attr('height', function(d) { 
     return y(d); 
    }) 
    .attr('y', function(d) { 
     return height - y(d); 
    }) 
    .delay(function(d, i) { 
     return i * delay; 
    }) 
    .duration(duration) 
    .ease(easing); 

そして、私の推移アウトクリックされたもの以外のバーはすべて？

Answer 1

selection.filter()を使用して、1つのバーをフィルタにかけることができます.1つのバーは、クリックイベントを受け取り、その後、他のバーをすべて切り換えます。あなたが提供まばらなスニペットを考える

bars.on("click", function() { 
    var clicked = this; // Remember which bar received the click 

    bars 
    .filter(function() { 
     return this != clicked; // Use a filter to select all other bars for the transition. 
    }) 
    .transition() 
    .attr('height', 0) 
    .attr('y', height) 
    .duration(300) 
    .delay(function(d, i) { 
     return i * delay; 
    }); 
}); 

同じことを達成するために、よりエレガントなまたはより効率的な方法があるかもしれませんが、これは、いかなる状況下でも動作するはずです。 meetamitによるpointed outと同様に、1つのアプローチでは、要素にバインドされたデータの使用が必要になる場合があります。しかし、より複雑なソリューションでは、コードの残りの部分とデータの構造についてより多くの洞察が必要です。