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

Question

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

我已成功在这些圆圈上设置鼠标悬停行为以打印简单的控制台消息.当我鼠标悬停(和mouseout)时,我看到那些控制台消息,所以我知道它们正常工作.

但是,我不想打印那些控制台消息,而是在鼠标悬停时将光标更改为手,我想在鼠标移出时将光标更改回正常箭头.鉴于我的代码如下,我该怎么做？

在鼠标悬停时,我知道我需要将样式属性更改cursor为pointer和鼠标输出,我知道我需要将其更改为default但我不知道应该如何操作的语法.有人可以向我解释一下吗？以下是我的代码.

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

Answer 1

你可以这样做:

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

在这里工作代码

Answer 2

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

.dots {
  cursor: pointer;
}

Answer 3

你刚试过这个:

    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")
      .style("cursor", "pointer");

因为当您将光标定义为对象的指针时,当您"鼠标悬停"时,指针将变为指针.

看这里的例子:https://jsfiddle.net/oj5vubxn/2/

Answer 4

在这种情况下，动态设置样式没有任何意义。如果鼠标悬停在元素上，则将应用光标样式。否则，您将鼠标悬停在另一个元素上，并将应用该元素的光标样式。因此，没有理由根据鼠标悬停事件动态设置样式。您最好只在初始化时设置样式。

myCircle.style("cursor", "pointer");

或者，只需将CSS文件中的样式设置为另一个答案即可。