在鼠标悬停的堆栈图上淡化酒吧

Question

我使用d3比较堆栈布局中的2个数据集。除了当我将鼠标悬停在特定列上时，所有内容都看起来不错，我希望所有其他列都可以淡入.2不透明度。在这一点上，我可以让所有的列淡出，但是我无法保持特定的列，我的鼠标悬停在实体上。下面就来改变mousover &鼠标移出酒吧代码：

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

所以基本上我需要一个过滤功能来选择一切，但RECT我的鼠标是突出。 D3确实有一个，但我对如何针对我的情况实现这一点感到困惑。任何帮助？

更新

我稍微更新拉斯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); 
}