web-dev-qa-db-fra.com

d3.js - Comment puis-je placer le curseur à portée de main lorsque la souris survole ces éléments sur le conteneur SVG?

J'ai utilisé d3.js pour dessiner des cercles sur un conteneur SVG.

J'ai réussi à définir le comportement de survol de la souris sur ces cercles pour imprimer des messages de console simples. Je vois ces messages sur la console lorsque je passe la souris (et la souris), donc je sais qu'ils fonctionnent correctement.

Cependant, au lieu d'imprimer les messages de la console, je veux changer le curseur sur la main lorsque je les survole, et je veux ramener le curseur sur la flèche normale lorsque je souris. Compte tenu de mon code ci-dessous, comment puis-je le faire?

Au survol, je sais que je dois changer la propriété de style cursor en pointer et au mouseout, je sais que je dois la changer en default mais je ne connais pas le syntaxe de la façon dont je dois le faire. Quelqu'un peut-il me l'expliquer? Voici mon code.

        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?
            }
          }
        );
javascriptcssd3.jssvgmouseover
14
Saqib Ali

Vous pouvez le faire comme ceci:

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

code de travail ici

21
Cyril Cherian

Pourquoi ne laissez-vous pas simplement CSS s'en occuper?

.dots {
  cursor: pointer;
}
20
Gerardo Furtado

Vous venez d’essayer ceci:

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

Parce que lorsque vous définissez le curseur comme un pointeur pour votre objet, lorsque vous "survolez", le pointeur devient un pointeur.

Voir ici un exemple: https://jsfiddle.net/oj5vubxn/2/

9
Gremi64

La définition dynamique du style dans ce cas n'a aucun sens. Si la souris survole l'élément, le style du curseur est appliqué. Sinon, vous survolez un autre élément et le style de curseur de cet élément est appliqué. Il n'y a donc aucune raison de définir le style dynamiquement en fonction des événements de survol. Vous pourriez tout aussi bien définir le style lors de l'initialisation.

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

Ou, définissez simplement le style dans le fichier CSS comme une autre réponse indiquée.

5
Doughy