score:37

Accepted answer

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.

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

score:11

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.

score:15

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/

score:30

Why don't you simply let CSS handle it?

.dots {
  cursor: pointer;
}

Related Query

More Query from same tag