在D3.js中相当于jQuery的'not'选择器？ [英] Equivalent of jQuery's 'not' selector in D3.js?

问题描述

在D3.js中工作时，我想选择所有与选择器匹配的元素，除了用于当前元素。

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.

这是我目前的情况：

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等价物？

In jQuery, I could do this using not. Anyone know the D3.js equivalent?

推荐答案

更简单的方法是使用D3的操作符： / p>

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

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，其他时间加长。

There's one difference here in that, unlike your original code, the circleUnderMouse 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 .duration() operator in a similar fashion to speed the circleUnderMouse time to 0 and the others longer.

这篇关于在D3.js中相当于jQuery的'not'选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！