blocks|key|1717078|text|您可以对选择执行filter操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1717079|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');
++});|code-block|syntax|javascript|1717080|entityMap^0|8|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can <code>filter</code> a selection:

<pre><code>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');
 });
</code></pre>

blocks|key|1717184|text|如果您的元素具有唯一的CSS可访问标识符，则可以使用:not()选择器。一些潜在的例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1717185|d3.selectAll("circle.prospect:not(#"+%2B+this.id+%2B+")");
d3.selectAll("circle.prospect:not(."+%2B+someUniqueClassFrom(d)+%2B+")");
d3.selectAll("circle.prospect:not([uniqueAttr="+%2B+this.getAttribute('uniqueAttr')+%2B+"])");|code-block|syntax|javascript|1717186|d3.selectAll('circle.prospect:not(this)')不工作的原因是因为它只是从字面上说过滤掉任何<this></this>元素-这显然不是您的意图，而且因为它已经只选择了<circle></circle>元素将不会有任何影响。|1717187|即使您通常不应用某些独特的DOM属性，也没有理由不临时设置一个：|1717188|vis.selectAll('circle.prospect')
.on("mouseover",+function(d)+{
++++this.id+=+'temp-'+%2B+Math.random();
++++d3.selectAll('circle.prospect:not(#'+%2B+this.id+%2B+')').transition().style('opacity','0.5');
++++d3.select(this).attr('opacity','1.0');
++++this.id+=+'';
++});|1717189|但是，如果您的元素还没有分配ID，我认为Ian+Roberts的解决方案可能就是我要做的，而不是这个临时标识符hack。|1717190|entityMap^0|Q|6|0|0|0|15|1R|D|2S|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

If your elements have an unique CSS-accessible identifiers, you can use the <code>:not()</code> selector. Some potential examples:

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

The reason <code>d3.selectAll('circle.prospect:not(this)')</code> doesn't work is because it's just literally saying to filter out any <code>&lt;this&gt;&lt;/this&gt;</code> elements — which is obviously not your intent, and since it's already selecting only <code>&lt;circle&gt;&lt;/circle&gt;</code> elements would have no effect regardless.

Even if you don't generally apply some unique DOM attribute, there's no reason you couldn't set one temporarily:

<pre><code>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 = '';
 });
</code></pre>

That said, however, if your elements don't already have an ID assigned already, I think Ian Roberts' solution is probably what I would do instead of this temporary identifier hack.

blocks|key|1717257|text|一种更简单的方法是使用D3运算符的功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1717258|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;
++++});
});|code-block|syntax|javascript|1717259|这里有一个不同之处，那就是与原始代码不同，circleUnderMouse元素的不透明度也将是平滑的动画。如果它已经完全不透明，那么可能不是什么大问题，否则您可以以类似的方式使用.duration()运算符，将circleUnderMouse时间加快到0，其他时间更长。|offset|length|style|CODE|1717260|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mbostock/d3/wiki/Transitions#wiki-duration^0|0|0|L|G|2H|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

An even simpler way to approach this would be using the power of D3's operators:

<pre><code>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;
 });
});
</code></pre>

There's one difference here in that, unlike your original code, the <code>circleUnderMouse</code> element's opacity will be smoothly animated as well. If it's already fully opaque then probably not a big deal, otherwise you could use the <a href="https://github.com/mbostock/d3/wiki/Transitions#wiki-duration">.duration()</a> operator in a similar fashion to speed the circleUnderMouse time to 0 and the others longer.

Working in D3.js, I'd like to select all the elements that match a selector except for the current element. 

The reason is that I'd like to mouseover a circle, and have all the other circles with the same class turn light blue, but the current circle to stay the same shade. 

This is what I have currently: 

<pre><code>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');
 });
</code></pre>

In jQuery, I <a href="https://stackoverflow.com/questions/437958/jquery-exclude-this-from-selector">could do this using <code>not</code></a>. Anyone know the D3.js equivalent?

Equivalent of jQuery's 'not' selector in D3.js?

jQuery

在D3.js中，我希望选择与选择器匹配的所有元素，但当前元素除外。原因是我想把鼠标移到一个圆圈上，让同一类的所有其他圆圈变成浅蓝色，但当前的圆圈保持相同的阴影。这是我目前所拥有的：vis.selectAll('circle.prospect').on("mouseover", function(d) {      co...

问相当于D3.js中jQuery的'not‘选择器？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相当于D3.js中jQuery的'not‘选择器？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相当于D3.js中jQuery的'not‘选择器？
EN