関数に基づくサブ選択

Question

私は、特定のスタイル値に基づいてフィルタリングしようとしている要素を選択しています（不透明度= 1のものだけが必要です）。私はselection.filterのドキュメントをselection.selectとselection.selectAllと一緒に調べていますが、関数の引数で正しい使い方を混乱させています。

"select"は最初に一致する要素を（期待通りに）選択することを示しますが、フィルタドキュメントの例では、インデックスを維持しながら「奇妙な」要素を選択する関数で使用されています。

"selectAll"は、要素の配列を返すことができますが、関数の引数は元の選択の各要素に対して通常の方法で1つずつ呼び出されることを示します。私はこのためのユースケースを想像するのが難しいです。

私は、これらの関数の正しい使い方を議論するチュートリアルや例があるかどうかは不思議ですね。

おかげで、 スコット

Answer 1

あなたはフィルタを使用し、選択した要素のサブセットに選択を減らしたい場合。子孫要素を選択する場合は、またはselectAllを選択します。

多くの場合、フィルタはデータまたはインデックスに基づいて要素をフィルタするために使用されます。ただし、フィルタ機能内で選択された要素にthisという名前でアクセスできます。あなたが選択したいくつかの要素を持っている、とあなたは1の不透明度を持つ要素のみにその選択を減らしたい場合はこのように、あなたが言うことができます。

var opaque = selection.filter(function() { 
    return this.style.opacity == 1; 
}); 

を安全にするために、あなたはむしろcomputed styleを見てすることを好むかもしれません要素のスタイルプロパティよりもこのようにして、不透明度がスタイルシートから継承される場合、正しい値が得られます。それ以外の場合、スタイルが継承されるときthis.style.opacityは空の文字列になります。

var opaque = selection.filter(function() { 
    return window.getComputedStyle(this, null).getPropertyValue("opacity") == 1; 
}); 

または同等に、ノードを選択し、selection.styleを使用します。

var opaque = selection.filter(function() { 
    return d3.select(this).style("opacity") == 1; 
}); 

あなたはそれが簡単にあなたがデータによって、またはクラスによって、代わりに計算されたスタイルプロパティによってフィルタする場合かもしれません。たとえば、ノードにクラスを設定した場合、クラスで選択範囲をフィルタリングすることができます。

var opaque = selection.filter(".opaque");