Question

我正在使用d3绘制几个填充了某些颜色的矩形和圆圈。

现在，当鼠标指针悬停在物体上时，我的物体会变暗。我的想法是通过在围绕每个对象的g标签上放置带有alpha的黑色背景来使用CSS：

g:hover {
  background-color: rgba(0, 0, 0, .5);
}

但这不起作用。当我在那里放opacity: .5时，它确实有用，但我希望它更暗，而不是更轻。有没有人有一些提示？谢谢！

Answer 1

我认为你不能在SVG元素上可靠地使用hover伪。而是使用d3在鼠标悬停时添加一个类，并在mouseout上删除它。

例如：

svg.append("g")
    .on("mouseover", function() {
        d3.select(this).classed("hover", true);
      })
    .on("mouseout", function() {
         d3.select(this).classed("hover", false);
    })

然后在CSS

g.hover {
    background-color: rgba(0, 0, 0, .5);
}

希望有所帮助。

编辑：也许你可以使用：悬停。请参阅此问题并回答https://stackoverflow.com/a/9210392/2594702。

基本上它表示使用fill: rgba(0, 0, 0, .5)代替background-color。

我确信在我学习D3使用鼠标悬停和鼠标移动时我会记得阅读。也许浏览器支持不如现在好。

Answer 2

:hover一般情况下工作，但将它应用于g标记是错误的方法，该标记是矩形的父级，而不是重叠的子级。

我现在通过向mouseover标记添加rect事件来解决整个问题，读出fill属性的颜色值，并计算出更暗的值。可能不是最好的解决方案，但我没有其他想法而且有效。

.on("mouseover", function() {
    if((r = $(this).css("fill").match(/(\d+),\s*(\d+),\s*(\d+)/i))) {
        for(var i = 1; i < 4; i++) {
            r[i] = Math.round(r[i] * .5);
        }
        $(this).attr("fill-old", $(this).css("fill"));
        $(this).css("fill", 'rgb('+r[1]+','+r[2]+','+r[3]+')');
    }
})
.on("mouseout", function() {
    if($(this).attr("fill-old")) $(this).css("fill", $(this).attr("fill-old"));
});

Answer 3

适用于D3 vers。 4 在我的甜甜圈图表上，我遇到了同样的问题。我找到了mboostocks解决方案，可以找到here。我采用了他的第二个例子，将“更亮”替换为“更暗”。我的结果代码：

"B"

在d3中鼠标悬停时使rect / circle变暗

3 个答案: