d3.js - Come posso posizionare il cursore sulla mano quando il mouse trascina questi elementi sul contenitore SVG?

Question

Ho usato d3.js per disegnare delle cerchie su un contenitore SVG.

Ho impostato correttamente il comportamento mouseover su questi cerchi per stampare messaggi di console semplici. Vedo quei messaggi della console quando eseguo il mouseover (e il mouseout), quindi so che stanno funzionando correttamente.

Tuttavia, invece di stampare i messaggi della console, voglio cambiare il cursore sulla mano quando li topo sopra e voglio cambiare il cursore alla freccia normale quando torno. Dato il mio codice qui sotto, come posso farlo?

al passaggio del mouse, so che ho bisogno di cambiare la proprietà di stile cursor per pointer e mouseout, so che ho bisogno di cambiare a default, ma non so la sintassi di come avrei dovuto farlo. Qualcuno può spiegarmelo per favore? Di seguito è il mio codice.

 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

Si può fare in questo modo:

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

codice funzionante here

Answer 2

Hai appena provare questo:

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

Perché quando si definisce il cursore come puntatore per il tuo oggetto, quando fai il "mouseover", il puntatore diventa un puntatore.

Vedi qui un esempio: https://jsfiddle.net/oj5vubxn/2/

Answer 3

Perché non semplicemente lasciare CSS gestirlo?

.dots { 
    cursor: pointer; 
} 

Answer 4

L'impostazione dinamica dello stile in questo caso non ha alcun senso. Se il mouse si trova sopra l'elemento, viene applicato lo stile del cursore. Altrimenti, si passa con il mouse su un altro elemento e viene applicato lo stile del cursore per quell'elemento. Quindi non c'è motivo di impostare lo stile dinamicamente in base agli eventi mouseover. Si potrebbe anche solo impostare lo stile sull'inizializzazione.

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

Oppure, è sufficiente impostare lo stile nel file CSS come un'altra risposta indicata.