javascript 等效于 D3.js 中 jQuery 的“非”选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12321352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Equivalent of jQuery's 'not' selector in D3.js?
提问by Richard
Working in D3.js, I'd like to select all the elements that match a selector exceptfor the current element.
在 D3.js 中工作，我想选择除当前元素之外的所有与选择器匹配的元素。
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:
这是我目前所拥有的：
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');
});
In jQuery, I could do this using not. Anyone know the D3.js equivalent?
在 jQuery 中，我可以使用not. 有人知道 D3.js 的等价物吗？
采纳答案by natevw
An even simpler way to approach this would be using the power of D3's operators:
一种更简单的方法是使用 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;
});
});
There's one difference here in that, unlike your original code, the circleUnderMouseelement'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 .duration()operator in a similar fashion to speed the circleUnderMouse time to 0 and the others longer.
这里有一个区别，与您的原始代码不同，circleUnderMouse元素的不透明度也会平滑地动画化。如果它已经完全不透明，那么可能没什么大不了的，否则您可以以类似的方式使用.duration()运算符将 circleUnderMouse 时间加速到 0 和其他更长的时间。
回答by natevw
If your elements have an unique CSS-accessible identifiers, you canuse the :not()selector. Some potential examples:
如果您的元素具有唯一的 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') + "])");
The reason d3.selectAll('circle.prospect:not(this)')doesn't work is because it's just literally saying to filter out any <this></this>elements — which is obviously not your intent, and since it's already selecting only <circle></circle>elements would have no effect regardless.
原因d3.selectAll('circle.prospect:not(this)')不起作用是因为它只是从字面上说过滤掉任何<this></this>元素——这显然不是你的意图，而且因为它已经只选择了<circle></circle>元素，无论如何都不会产生任何影响。
Even if you don't generally apply some unique DOM attribute, there's no reason you couldn't set one temporarily:
即使您通常不应用某些独特的 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 = '';
});
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.
尽管如此，如果你的元素还没有分配一个 ID，我认为 Ian Roberts 的解决方案可能是我会做的，而不是这个临时标识符黑客。
回答by Ian Roberts
You can filtera selection:
您可以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');
});
