Javascript d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时，如何将光标设置为手形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36326683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
提问by Saqib Ali
I have used d3.js to draw some circles on an SVG container.
我使用 d3.js 在 SVG 容器上绘制了一些圆圈。
I have successfully set the mouseover behavior on these circles to print simple console messages. I see those console messages when I mouseover (and mouseout) so I know they are working properly.
我已成功在这些圆圈上设置鼠标悬停行为以打印简单的控制台消息。我在鼠标悬停（和鼠标移开）时看到这些控制台消息，所以我知道它们工作正常。
However, instead of printing that console messages, I want to change the cursor to the hand when I mouseover them, and I want to change the cursor back to the normal arrow when I mouse out. Given my code below, how can I do it?
但是，我不想打印控制台消息，而是想在将鼠标悬停在手上时将光标更改为手，并且在鼠标移开时将光标更改回正常箭头。鉴于我下面的代码，我该怎么做？
On mouseover, I know I need to change the style property cursorto pointerand on mouseout, I know I need to change it to defaultbut I don't know the syntax of how I should do it. Can someone please explain it to me? Below is my code.
鼠标悬停，我知道我需要的样式属性更改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?
}
}
);
回答by Cyril Cherian
You can do it like this:
你可以这样做：
myCircle.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
},
"mouseout": function(d) {
d3.select(this).style("cursor", "default");
}
});
working code here
工作代码在这里
OR
或者
you can simply work this out in the CSS.
你可以简单地在 CSS 中解决这个问题。
myCircle.style('cursor', 'pointer')
myCircle.style('cursor', 'pointer')
回答by Gerardo Furtado
Why don't you simply let CSS handle it?
为什么不简单地让 CSS 处理它？
.dots {
cursor: pointer;
}
回答by Gremi64
Did you just try this :
你刚试过这个吗：
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");
Because when you define cursor as a pointer for your object, when you "mouseover", then the pointer become a pointer.
因为当您将光标定义为对象的指针时，当您“鼠标悬停”时，指针就变成了指针。
See here an example : https://jsfiddle.net/oj5vubxn/2/
在这里看到一个例子：https: //jsfiddle.net/oj5vubxn/2/
回答by Doughy
Setting the style dynamically in this case doesn't make any sense. If the mouse is over the element, the cursor style is applied. Otherwise, you are hovering over another element and the cursor style for that element is applied. So there is no reason to set the style dynamically based on mouseover events. You might as well just set the style on initialization.
在这种情况下动态设置样式没有任何意义。如果鼠标悬停在元素上，则应用光标样式。否则，您将鼠标悬停在另一个元素上并应用该元素的光标样式。所以没有理由根据鼠标悬停事件动态设置样式。您也可以在初始化时设置样式。
myCircle.style("cursor", "pointer");
Or, just set the style in the CSS file as another answer indicated.
或者，只需将 CSS 文件中的样式设置为指示的另一个答案。
