我使用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?
}
}
);
myCircle.style('cursor', 'pointer')
。 - Chris Conlan