Javascript 相当于jQuery';s';不是';D3.js中的选择器?

Javascript 相当于jQuery';s';不是';D3.js中的选择器?,javascript,jquery,d3.js,Javascript,Jquery,D3.js,在D3.js中,我想选择除当前元素之外与选择器匹配的所有元素 原因是我想鼠标移到一个圆上,让同一类的所有其他圆变成浅蓝色,但当前的圆保持相同的阴影 这就是我目前拥有的: vis.selectAll('circle.prospect') .on("mouseover", function(d) { console.log(d); d3.selectAll('circle.prospect').transition().style('opacity','0.5'); d3

在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中,我。有人知道D3.js的等价物吗?

您可以
筛选选择:

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

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

更简单的方法是使用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
元素的不透明性也将平滑地设置动画。如果它已经是完全不透明的,那么可能没什么大不了的,否则你可以用类似的方式使用操作符将鼠标下的圆圈时间加速到0,而其他的时间则会更长。

你有没有尝试过
d3.selectAll('circle.prospect:not(this)
?@ZoltanToth-是的,恐怕不行。你也可以使用简单的CSS,而不是JavaScript。例如,要在将鼠标悬停在外部SVG元素中的任何圆上时淡出其他圆:
SVG:hover circle:not(:hover){opacity:.5;}