javascript - 鼠标悬停时堆栈图中的淡入淡出栏

Question

我正在使用 d3 比较堆栈布局中的 2 个数据集。一切看起来都很棒，除了当我将鼠标悬停在特定列上时，我希望所有 other 列都淡化为 .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 的回答，并让它发挥作用。由于这是一个堆栈图，我还想选择同一行中的两个条形图。这是我为任何 future 用户编写的代码:

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

可以传入当前节点绑定(bind)的数据进行过滤:

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