1

特定のスタイル値に基づいてフィルターで除外しようとしている要素を選択しました（不透明度= 1の要素のみが必要です）。selection.filterとselection.selectおよびselection.selectAllのドキュメントも参照していますが、関数の引数を使用した正しい使用法について混乱しています。

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

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

私が疑問に思っているのは、これらの関数の正しい使用法について説明しているチュートリアルや例があるかどうかです。

ありがとう、スコット

4

1 に答える 1

9

選択範囲を選択した要素のサブセットに減らす場合は、filterを使用します。子孫要素を選択する場合は、selectまたはselectAllを使用します。

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

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

安全のために、要素のスタイルプロパティではなく、計算されたスタイルを確認することをお勧めします。このように、不透明度がスタイルシートから継承されている場合は、正しい値を取得します。それ以外の場合、スタイルが継承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");
于 2012-04-10T21:09:26.827 に答える