d3 中鼠标悬停时使矩形/圆形变暗

Question

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

现在，当鼠标指针悬停在我的对象上时，它们将变暗。我的想法是使用 CSS，在每个对象周围的 g 标签上放置带有 alpha 的黑色背景：

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

但这是行不通的。当我把它放在那里时它确实有效opacity: .5，但我想要它更暗，而不是更亮。有人有什么提示吗？谢谢你！

Answer 1

我认为您无法在 SVG 元素上可靠地使用悬停伪代码。相反，使用 d3 在鼠标悬停时添加一个类，并在鼠标移开时将其删除。

例如：

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

希望有帮助。

编辑：也许你可以使用：hover。请参阅此问题并回答/sf/answers/644727471/。

基本上它说使用fill: rgba(0, 0, 0, .5)而不是background-color.

我确信我记得在学习 D3 时读过如何使用 mouseover 和 mouseout。也许当时的浏览器支持没有现在那么好。