鼠标悬停时堆栈图中的淡入淡出条

Question

我正在使用 d3 比较堆栈布局中的 2 个数据集。一切看起来都很棒，除了当我将鼠标悬停在特定列上时，我希望所有 other 列都淡化为 0.2 不透明度。此时我可以让所有列消失，但是我无法保持鼠标悬停在实体上的特定列。这是更改鼠标悬停和鼠标移出栏的代码：

var rects = groups.selectAll("rect")

 // Rect initialization code here....    

.on("mouseover", function(d) {
    // make all bars opaque
    fade(.2);
    })
.on("mouseout", function() {
    fade(1);
    });

这是淡入淡出功能：

function fade(opacity) {
    d3.selectAll("rect")
    .transition()
    .style("opacity", opacity);
};

所以基本上我需要一个过滤功能来选择除了我的鼠标突出显示的矩形之外的所有内容。 D3 确实有一个，但我对如何根据我的情况实现这一点有点困惑。有什么帮助吗？

更新

我稍微更新了 Lars Kotthoff 的答案并让它发挥作用。由于这是一个堆栈图，我还想选择同一行中的两个条形图。这是我给未来用户的代码：

function fade(opacity, selectedBar) {
    d3.selectAll("rect")
        .filter(function(d, i) { return selectedBar !== d && selectedBar.x !== d.x; })
        .transition()
        .style("opacity", opacity);
};

然后在主要部分中，我只是将不透明度级别和选定元素传递给淡入淡出函数：

.on("mouseover", function(d) {
        fade(.4, d);
};

Answer 1

可以传入绑定到当前节点的数据进行过滤：

.on("mouseover", function(d) {
  // make all bars opaque
  fade(.2, d);
})
.on("mouseout", function(d) {
  fade(1, d);
});

function fade(opacity, d) {
  d3.selectAll("rect")
    .filter(function(e) { return e !== d; })
    .transition()
    .style("opacity", opacity);
}