D3.js - Как я могу установить курсор в ручную при наведении этих элементов в контейнер SVG?

Я использовал d3.js для рисования некоторых кругов в контейнере SVG.

Я успешно установил поведение мыши в этих кругах для печати простых консольных сообщений. Я вижу эти консольные сообщения, когда я наводил курсор мыши (и мышь), поэтому я знаю, что они работают правильно.

Однако вместо того, чтобы печатать эти сообщения консоли, я хочу поменять курсор на руку, когда я навешиваю на них курсор, и я хочу поменять курсор на обычную стрелку, когда я выхожу. Учитывая мой код ниже, как я могу это сделать?

При наведении мыши я знаю, что мне нужно изменить свойство стиля cursor на pointer и на mouseout, я знаю, что мне нужно изменить его на 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.on({
      "mouseover": function(d) {
        d3.select(this).style("cursor", "pointer"); 
      },
      "mouseout": function(d) {
        d3.select(this).style("cursor", "default"); 
      }
    });

.dots {
  cursor: pointer;
}

    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");

myCircle.style("cursor", "pointer");