D3.js: Position des info-bulles à l'aide de l'élément de position, pas la position de la souris?

Je suis en utilisant D3 pour dessiner un graphique en nuage de points. Je voudrais afficher les info-bulles lorsque l'utilisateur passe la souris sur chaque cercle.

Mon problème est que je peux ajouter des info-bulles, mais ils sont positionnées à l'aide de la souris événement d3.event.pageX et d3.event.pageY, de sorte qu'ils ne sont pas positionnés de façon constante au cours de chaque cercle.

Au lieu de cela, certains sont un peu à gauche du cercle, certains à droite, ça dépend de comment l'utilisateur de la souris entre dans le cercle.

C'est mon code: 

circles
  .on("mouseover", function(d) {         
    tooltip.html(d)  
      .style("left", (d3.event.pageX) + "px")     
      .style("top", (d3.event.pageY - 28) + "px");    
  })                  
  .on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
  });

Et est un JSFiddle montrant le problème: http://jsfiddle.net/WLYUY/5/

Est-il une manière que je peux utiliser le centre du cercle lui-même que la position d'orienter l'info-bulle, pas la position de la souris?

  • Si vous êtes ok avec tout type d'info-bulle, cette réponse devrait aider.
  • Merci! Je préfère l'utiliser pur D3 info-bulles plutôt que tipsy, si possible.
InformationsquelleAutor Richard | 2013-04-27
  1. 30

    Dans votre cas particulier, vous pouvez tout simplement utiliser d à la position de l'info-bulle, c'est à dire

    tooltip.html(d)  
  .style("left", d + "px")     
  .style("top", d + "px");

    Pour rendre tout ceci un peu plus général, vous pouvez sélectionner l'élément qui est en cours on passe la souris dessus et obtenir ses coordonnées à la position de l'info-bulle, c'est à dire

    tooltip.html(d)  
  .style("left", d3.select(this).attr("cx") + "px")     
  .style("top", d3.select(this).attr("cy") + "px");
    • Merci - j'ai peur à l'aide de d3.select(this).attr("cx") ne fonctionne que si le <body> et <svg> éléments ont le même positionnement. Voir jsfiddle.net/WLYUY/6
    • Si vous avez d'autres contenus, vous devez ajouter le décalage de la SVG à la position, voir jsfiddle.net/WLYUY/7
    • La solution avec un décalage travaillé pour moi. Merci Lars. Maintenant, j'utilise la visualisation dans un bootstrap grille de colonne, mais le décalage n'est pas affecté par le nouveau positionnement. Comment puis-je résoudre ce problème?
    • Pas sûr, aurait besoin de voir un exemple complet. Vous voulez poser une autre question à ce sujet.
    • J'ai trouvé ceci: <code>var matrice = ce.getScreenCTM().traduire(+ce.getAttribute("cx"),+ce.getAttribute("cy"));astuce.style("de gauche", (fenêtre.pageXOffset + de la matrice.e) + "px").style("top", (fenêtre.pageYOffset + de la matrice.f + 30) + "px");</code>
    InformationsquelleAutor Lars Kotthoff
  2. 15

    Trouvé quelque chose ici qui pourrait répondre à votre problème, même si <body> et <svg> ont différentes de positionnement. C'est en supposant que vous avez absolute position pour votre info-bulle.

    .on("mouseover", function(d) {
    var matrix = this.getScreenCTM()
        .translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
    tooltip.html(d)
        .style("left", (window.pageXOffset + matrix.e + 15) + "px")
        .style("top", (window.pageYOffset + matrix.f - 30) + "px");
})
    • Juste ce dont j'avais besoin. Merci!
    • Solution retenue n'est pas complète avec votre plus.
    InformationsquelleAutor Boxuan
  3. 0

    Je suis nouveau sur D3 si cela peut ne pas fonctionner pour les nuages de points... mais cela semble fonctionner pour les graphiques à barres... où v1 et v2 sont les valeurs tracées.. et il semble chercher la valeur dans le tableau de données.

    .on("mouseover", function(d) {
                  divt .transition()
                      .duration(200)
                      .style("opacity", .9);
                  divt .html(d.v1)
                      .style("left", x(d.v2)+50 + "px")
                      .style("top",y(d.v1)+ "px");})
    InformationsquelleAutor timemirror