d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?

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')

Why don't you simply let CSS handle it?

.dots {
  cursor: pointer;
}

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/