相当于 D3.js 中 jQuery 的“非”选择器？

Posted 2023-02-22

【中文标题】相当于 D3.js 中 jQuery 的“非”选择器？

【英文标题】：Equivalent of jQuery's 'not' selector in D3.js?

【发布时间】：2012-09-01 12:41:43

【问题描述】：

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

原因是我想将鼠标悬停在一个圆圈上，并让具有相同类别的所有其他圆圈变为浅蓝色，但当前圆圈保持相同的阴影。

这是我目前拥有的：

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 中，我could do this using not。任何人都知道 D3.js 等价物吗？

【问题讨论】：

你试过d3.selectAll('circle.prospect:not(this)')吗？

@ZoltanToth - 是的，恐怕这行不通。

您也可以为此使用纯 CSS，而不是 javascript。例如，当悬停在外部 SVG 元素中的任何圆圈上时淡出其他圆圈：svg:hover circle:not(:hover) opacity: .5; .

【参考方案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 的解决方案可能是我会做的，而不是这个临时标识符破解。

【参考方案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');
  );

【参考方案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 并且其他时间更长。