相当于D3.js中jQuery的’not’选择器？

在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相当吗？

Answer 1

更简单的方法是使用D3运算符的强大function：

 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元素的不透明度也将平滑地动画。 如果它已经完全不透明，那么可能没什么大不了的，否则你可以以类似的方式使用.duration（）运算符来将circleUnderMouse时间加速到0而其他时间更长。

Answer 2

如果您的元素具有唯一的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)')不起作用的原因是因为它只是字面意思来过滤掉任何元素 – 这显然不是你的意图，因为它是已经只选择元素无论如何都没有效果。

即使您通常不应用某些唯一的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的解决方案可能就是我要做的，而不是这个临时标识符黑客攻击。

Answer 3

您可以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'); });