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

Posted

技术标签:

【中文标题】d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时,如何将光标设置为手?【英文标题】:d3.js - How can I set the cursor to hand when mouseover these elements on SVG container? 【发布时间】:2016-07-19 12:14:51 【问题描述】:

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

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

但是,我不想打印该控制台消息,而是想在鼠标悬停时将光标更改为手形,并且在鼠标移出时将光标更改回正常箭头。鉴于下面的代码,我该怎么做?

在鼠标悬停时,我知道我需要将样式属性 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?
            
          
        );

【问题讨论】:

【参考方案1】:

你可以这样做:

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

工作代码here

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

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

【讨论】:

你真的不需要设置mouseout的样式。原因是如果鼠标悬停在元素上,就会应用光标样式。否则,它不是。所以在这种情况下没有理由动态设置样式。您不妨在初始化时设置样式。 @Doughy 你说的是对的。我写了特定于OP所要求的答案。他想知道如何使用mouseovermouseout 这不是一个好的答案。请参阅下面使用 CSS 的答案。最好只设置myCircle.style('cursor', 'pointer')【参考方案2】:

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

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

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

【讨论】:

这是 D3 范式中的最佳答案。【参考方案3】:

为什么不让 CSS 来处理呢?

.dots 
  cursor: pointer;

【讨论】:

显然是最好的解决方案,除非您需要根据代码中的其他变量更改光标样式。【参考方案4】:

你有没有试过这个:

    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/

【讨论】:

以上是关于d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时,如何将光标设置为手?的主要内容,如果未能解决你的问题,请参考以下文章

d3.js 隐藏不透明度的弹出窗口不能与指针事件一起正常工作

D3.js:使用元素位置而不是鼠标位置定位工具提示?

SVG基础图形和D3.js

悬停链接并在 SVG 中更改颜色 [重复]

在鼠标悬停事件上更新 D3.js 图

如何使用 D3.js 将图像添加到 svg 容器