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

Question

在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

如果您的元素具有唯一的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的解决方案可能就是我要做的,而不是这个临时标识符黑客攻击.

Answer 2

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

Answer 3

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