d3.js - Jak ustawić kursor pod ręką po najechaniu myszką na te elementy w kontenerze SVG?

Question

Użyłem d3.js do narysowania niektórych okręgów na kontenerze SVG.

Udało mi się ustawić zachowanie kursora myszy w tych okręgach, aby wydrukować proste komunikaty konsoli. Widzę te komunikaty konsoli po najechaniu kursorem myszy (i po stronie myszy), więc wiem, że działają poprawnie.

Jednak zamiast drukować te komunikaty konsoli, chcę zmienić kursor na dłoń po najechaniu na nią myszką i chcę zmienić kursor z powrotem na normalną strzałkę, gdy wyjdę z myszy. Biorąc pod uwagę mój kod poniżej, jak mogę to zrobić?

po najechaniu myszą, wiem, że trzeba zmienić właściwość stylu cursor do pointer i po odsunięciu myszy, wiem, że trzeba go zmienić na default ale nie wiem składnię jak mam to zrobić. Czy ktoś może mi to wyjaśnić? Poniżej znajduje się mój kod.

 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? 
      } 
      } 
     ); 

Answer 1

Można to zrobić tak:

myCircle.on({ 
     "mouseover": function(d) { 
     d3.select(this).style("cursor", "pointer"); 
     }, 
     "mouseout": function(d) { 
     d3.select(this).style("cursor", "default"); 
     } 
    }); 

kod działa here

Answer 2

Czy po prostu spróbuj tego:

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

Ponieważ podczas definiowania kursor jako wskaźnik dla Twój obiekt, po "najechaniu kursorem", wskaźnik staje się wskaźnikiem.

Zobacz tutaj przykład: https://jsfiddle.net/oj5vubxn/2/

Answer 3

Dlaczego nie można po prostu pozwolić CSS poradzić?

.dots { 
    cursor: pointer; 
} 

Answer 4

Ustawienie stylu dynamicznie w tym przypadku nie ma żadnego sensu. Jeśli kursor myszy znajduje się nad elementem, zostanie zastosowany styl kursora. W przeciwnym razie najedziesz kursorem na inny element i zostanie zastosowany styl kursora dla tego elementu. Nie ma więc powodu, aby ustawić styl dynamicznie w oparciu o zdarzenia mouseover. Równie dobrze możesz ustawić styl podczas inicjalizacji.

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

Lub po prostu ustaw styl w pliku CSS, tak jak wskazano inną odpowiedź.