关键词：
【中文标题】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所要求的答案。他想知道如何使用mouseover 和mouseout。
这不是一个好的答案。请参阅下面使用 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/
【讨论】：
悬停链接并在 SVG 中更改颜色 [重复]
...5-02-0713:26:47【问题描述】：我创建了一个SVG地图，当我将鼠标悬停在链接上时，我想更改地图目标区域的颜色。当我将鼠标悬停在地图上的某个区域时，链接会从jQ获取下划线类，并且CSS悬停效果会更改地图上的填充颜色。但是... 查看详情
在鼠标悬停事件上更新 D3.js 图
】在鼠标悬停事件上更新D3.js图【英文标题】：UpdatingD3.jsgraphonmouseoverevent【发布时间】：2015-03-1122:43:59【问题描述】：我是d3的新手，我将mbostock的堆叠条形图示例(http://bl.ocks.org/mbostock/3886208)与地图相结合以显示数据(canada.json)我... 查看详情
嵌入在对象元素中的 SVG 上的鼠标指针悬停/jquery 单击事件不起作用
】嵌入在对象元素中的SVG上的鼠标指针悬停/jquery单击事件不起作用【英文标题】：Mousepointerhover/jqueryclickeventonSVGembeddedinobjectelementnotworking【发布时间】：2013-01-2422:24:26【问题描述】：我正在使用jQuery动态添加元素以使用以下代... 查看详情
鼠标悬停时的SVG工具提示？
】鼠标悬停时的SVG工具提示？【英文标题】：SVGtooltiponmousehover?【发布时间】：2015-05-1105:43:09【问题描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不... 查看详情
如何使用 D3.js 将图像添加到 svg 容器
】如何使用D3.js将图像添加到svg容器【英文标题】：HowtoaddanimagetoansvgcontainerusingD3.js【发布时间】：2013-01-1203:10:34【问题描述】：我创建了一个示例Asp.NetMVC4应用程序，其中我使用D3.js附加了一个SVG元素，然后在SVG内部附加了一个... 查看详情
jQuery SVG - 悬停元素
...。我在那个圆圈上创建了一个简单的svg.circle和svg.text。当鼠标悬停在圆圈上时，我想给出一点动画。它可以工作，但是当我在文本悬停状态上移动鼠标指针时关闭。这是正 查看详情
鼠标悬停事件中 D3.js 中的行返回
】鼠标悬停事件中D3.js中的行返回【英文标题】：LinereturninD3.jsinamouseoverevent【发布时间】：2022-01-2013:24:24【问题描述】：我正在尝试在D3.js可视化中构建我的输出，并且我正在使用\\n行返回但是JS没有读到，有什么办法可以解决... 查看详情
将鼠标悬停在非同级 div 上时更改 SVG 样式
】将鼠标悬停在非同级div上时更改SVG样式【英文标题】：ChangeSVGstylingwhilehoveringovernon-siblingdiv【发布时间】：2014-06-3012:32:13【问题描述】：当鼠标悬停在页面其他位置的另一个分区上时，我希望能够更改内联svg徽标的样式。到目... 查看详情
使用对象时如何在鼠标悬停时更改 SVG 笔触颜色
】使用对象时如何在鼠标悬停时更改SVG笔触颜色【英文标题】：HowtochangeSVGstrokecoloronmouseoverwhenusinganobject【发布时间】：2020-05-3016:50:15【问题描述】：当鼠标移到图像上时，我正在尝试更改svg图像笔触颜色。我现在所拥有的并没... 查看详情
svg / d3.js 矩形一个角上的圆角
】svg/d3.js矩形一个角上的圆角【英文标题】：svg/d3.jsroundedcornersononesideofarectangle【发布时间】：2012-08-2009:20:32【问题描述】：我知道svg有一个内置函数来做圆角，但我只需要在四个角中的两个上做圆角。我知道我可以在彼此的顶... 查看详情
d3 : 为两个绘图同步鼠标悬停
】d3:为两个绘图同步鼠标悬停【英文标题】：d3:Synchronizemouseoverfortwoplots【发布时间】：2015-06-2222:16:52【问题描述】：我有两个大小相同的地块（svg1和svg2）。我想同步鼠标悬停，即。当用户将鼠标悬停在点[x0,y0]的sgv1上时，我希... 查看详情
当鼠标在父容器之外时如何使弹出子菜单保持可见，悬停时如何使子菜单保持可见
】当鼠标在父容器之外时如何使弹出子菜单保持可见，悬停时如何使子菜单保持可见【英文标题】：Howtomakepopsubmenustayvisiblewhenthemouseisoutsidetheparentscontainerandsubmenuwhenhover【发布时间】：2020-05-1004:30:07【问题描述】：当鼠标悬停在... 查看详情
鼠标悬停时的 SVG 地图工具提示，可单击
】鼠标悬停时的SVG地图工具提示，可单击【英文标题】：SVGMaptooltipsonmouseover,abilitytoclick【发布时间】：2016-10-1605:06:49【问题描述】：我创建了一个SVG地图，但是，我想制作它，以便当有人将鼠标悬停在它上面时有一个工具提示... 查看详情
d3.js 隐藏不透明度的弹出窗口不能与指针事件一起正常工作
...击关闭（身体上的任何地方）时，我希望弹出窗口消失。鼠标悬停也是如此-鼠标悬停 查看详情
鼠标离开 svg 元素时未删除悬停变换，仅限 Safari
】鼠标离开svg元素时未删除悬停变换，仅限Safari【英文标题】：Hovertransformnotremovedwhenmouseleavessvgelement,Safarionly【发布时间】：2021-11-0715:13:53【问题描述】：我有一段最少的代码，当将鼠标悬停在矩形上时，它应该会导致它发生变... 查看详情
Qt，如何在不将鼠标悬停在控件上的情况下使 Tooltip 可见？
】Qt，如何在不将鼠标悬停在控件上的情况下使Tooltip可见？【英文标题】：Qt,howtomakeTooltipvisiblewithouthoveringoverthecontrol?【发布时间】：2012-09-0405:23:40【问题描述】：我希望当容器小部件获得焦点/可见时工具提示默认可见。我希望... 查看详情
悬停时启动旋转动画，但悬停时仍会完成
...问题描述】：所以我已经完成了一些简单的代码来当你将鼠标悬停在容器上时旋转内部元素。当鼠标悬停在容器上时，这就像我想要的那样工作，但是当鼠标不再在容器内时，旋转停止。如何完成一个完整的旋转，由鼠标悬停启... 查看详情
当我在 SVG 中将鼠标悬停时，如何显示和隐藏同级元素？
】当我在SVG中将鼠标悬停时，如何显示和隐藏同级元素？【英文标题】：HowcanIshowandhidesiblingelementwhenImouseoverinSVG?【发布时间】：2021-05-1501:12:38【问题描述】：我使用了SVG文件，它是带有两个分割的圆形，当我将鼠标悬停在选定... 查看详情