20

D3.js で作業して、現在の要素を除いて、セレクターに一致するすべての要素を選択したいと思います。

その理由は、マウスを円の上に置き、同じクラスの他のすべての円を水色に変えたいが、現在の円は同じ色合いのままにしたいからです。

これは私が現在持っているものです：

vis.selectAll('circle.prospect')
.on("mouseover", function(d) { 
     console.log(d);
    d3.selectAll('circle.prospect').transition().style('opacity','0.5');
    d3.select(this).attr('opacity','1.0');
  });

jQuery では、not . D3.jsに相当するものを知っている人はいますか?

4

3 に答える 3

27

要素に固有の CSS アクセス可能な識別子がある場合は、セレクターを使用できます。:not()いくつかの潜在的な例:

d3.selectAll("circle.prospect:not(#" + this.id + ")");
d3.selectAll("circle.prospect:not(." + someUniqueClassFrom(d) + ")");
d3.selectAll("circle.prospect:not([uniqueAttr=" + this.getAttribute('uniqueAttr') + "])");

d3.selectAll('circle.prospect:not(this)')機能しない理由は、文字通り、<this></this>要素を除外するように言っているだけだからです。これは明らかにあなたの意図ではなく、すでに<circle></circle>要素のみを選択しているため、関係なく効果はありません。

通常、一意の DOM 属性を適用しない場合でも、一時的に設定できない理由はありません。

vis.selectAll('circle.prospect')
.on("mouseover", function(d) {
    this.id = 'temp-' + Math.random();
    d3.selectAll('circle.prospect:not(#' + this.id + ')').transition().style('opacity','0.5');
    d3.select(this).attr('opacity','1.0');
    this.id = '';
  });

とはいえ、要素に ID がまだ割り当てられていない場合は、この一時的な識別子ハックの代わりに Ian Roberts のソリューションを使用することをお勧めします。

于 2012-09-07T21:45:29.567 に答える
18

選択できますfilter:

vis.selectAll('circle.prospect')
.on("mouseover", function(d) { 
     console.log(d);
    var circleUnderMouse = this;
    d3.selectAll('circle.prospect').filter(function(d,i) {
      return (this !== circleUnderMouse);
    }).transition().style('opacity','0.5');
    d3.select(this).attr('opacity','1.0');
  });
于 2012-09-07T15:52:06.530 に答える
17

これにアプローチするさらに簡単な方法は、D3 の演算子の機能を使用することです。

vis.selectAll('circle.prospect').on("mouseover", function(d) {
    var circleUnderMouse = this;
    d3.selectAll('circle.prospect').transition().style('opacity',function () {
        return (this === circleUnderMouse) ? 1.0 : 0.5;
    });
});

元のコードとは異なり、circleUnderMouse要素の不透明度もスムーズにアニメーション化されるという点で、ここに 1 つの違いがあります。すでに完全に不透明な場合は、おそらく大したことではありません。そうでない場合は、同様の方法で.duration()演算子を使用して、circleUnderMouse の時間を 0 に短縮し、他の時間をより長くすることができます。

于 2012-09-07T21:54:31.443 に答える