d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时，如何将光标设置为手？

Question

我使用 d3.js 在 SVG 容器上绘制了一些圆圈。

我已经成功地在这些圆圈上设置了鼠标悬停行为以打印简单的控制台消息。我在鼠标悬停（和鼠标移出）时看到这些控制台消息，所以我知道它们工作正常。

但是，我不想打印控制台消息，而是想在将鼠标悬停在它们上时将光标更改为手，并且在鼠标移开时将光标更改回正常箭头。鉴于我的代码如下，我该怎么做？

在鼠标悬停时，我知道我需要将样式属性 cursor 更改为 pointer 并且在鼠标移出时，我知道我需要将其更改为 default 1bffe154不知道我应该怎么做的语法。有人可以向我解释一下吗？下面是我的代码。

         var myCircle = svgContainer.selectAll(".dots")
          .data(myDataList).enter().append("circle")
          .attr("class", "dots")
          .attr("cx", function(d, i) {return d.centerX})
          .attr("cy", function(d, i) {return d.centerY})
          .attr("r", 5)
          .attr("stroke-width", 0)
          .attr("fill", function(d, i) {return "red"})
          .style("display", "block");

        myCircle.on({
            "mouseover": function(d) {
              console.log('Hello World!'); // What do I change this to?
            },
            "mouseout": function(d) {
              console.log('Goodbye World!'); // What do I change this to?
            }
          }
        );

原文由 Saqib Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以这样做：

 myCircle.on({
      "mouseover": function(d) {
        d3.select(this).style("cursor", "pointer");
      },
      "mouseout": function(d) {
        d3.select(this).style("cursor", "default");
      }
    });

工作代码 在这里

或者

你可以简单地在 CSS 中解决这个问题。

myCircle.style('cursor', 'pointer')

原文由 Cyril Cherian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为什么不简单地让 CSS 处理它呢？

 .dots {
  cursor: pointer;
}

原文由 Gerardo Furtado 发布，翻译遵循 CC BY-SA 3.0 许可协议