Javascript 鼠标悬停时堆栈图中的淡入淡出条
我使用d3比较堆栈布局中的两个数据集。一切看起来都很好,只是当我将鼠标移到某个特定列上时,我希望所有的其他列的不透明度都变为.2。在这一点上,我可以让所有的列淡入淡出,但是我很难保持我的鼠标悬停在固体上的特定列。以下是更改mousover&mouseout上的条形图的代码:Javascript 鼠标悬停时堆栈图中的淡入淡出条,javascript,css,d3.js,Javascript,Css,D3.js,我使用d3比较堆栈布局中的两个数据集。一切看起来都很好,只是当我将鼠标移到某个特定列上时,我希望所有的其他列的不透明度都变为.2。在这一点上,我可以让所有的列淡入淡出,但是我很难保持我的鼠标悬停在固体上的特定列。以下是更改mousover&mouseout上的条形图的代码: var rects = groups.selectAll("rect") // Rect initialization code here.... .on("mouseover", function(d) {
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);
};
.on("mouseover", function(d) {
fade(.4, d);
};
所以基本上我需要一个过滤函数来选择除了鼠标高亮显示的矩形以外的所有东西。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);
};
然后在主部分中,我刚刚将不透明度级别和所选元素传递给淡入淡出功能:
function fade(opacity) {
d3.selectAll("rect")
.transition()
.style("opacity", opacity);
};
.on("mouseover", function(d) {
fade(.4, d);
};
可以传入绑定到当前节点的基准面以对其进行过滤:
.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);
}
这似乎应该有效,但当我尝试它时,d!==对于每个元素,d都返回false…抱歉,忘了将其声明为参数--answer updated.Awesome。谢谢你的帮助!