Comment ajouter une info-bulle à un graphique svg?

J'ai une série de rectangles svg (à l'aide de D3.js) et je souhaite afficher un message sur mouseover, le message doit être entouré par une boîte qui fonctionne comme arrière-plan. Ils doivent tous deux être parfaitement alignés l'un avec l'autre et au rectangle (en haut et au centre). Quelle est la meilleure façon de procéder?

J'ai essayé d'ajouter un texte svg à l'aide des attributs "x", "y", "largeur" et "hauteur", puis en précisant un svg rect. Le problème est que le point de référence pour le texte est au milieu (car je le veux centré aligné, j'ai utilisé l' text-anchor: middle ), mais pour le rectangle, c'est la coordonnée supérieure gauche, plus je voulais un peu de marge autour du texte Ce qui rend une sorte de douleur.

L'autre option était d'utiliser un html div, ce qui serait agréable, car je peux ajouter le texte et le rembourrage directement mais je ne sais pas comment obtenir les coordonnées absolues pour chaque rectangle. Y a-t-il un moyen de faire cela?

Vous pouvez utiliser l'élément titre tel qu'indiqué Phrogz. Il existe également de bons outils comme jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (qui peut être utilisé pour remplacer tous les éléments du titre), le nvd3 de Bob Monteverde ou même l'info-bulle de Twitter à partir de leur Bootstrap http: // Twitter.github.com/bootstrap/

Pouvez-vous utiliser simplement l' élément SVG <title> et le navigateur par défaut qui le transmet? (Remarque: ce n'est pas le même que l'attribut de title vous pouvez utiliser sur div / img / spans en html, il doit être un élément enfant nommé title )

Demo: http://jsfiddle.net/ALjJb/

 <svg xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="30" width="200" height="150"> <title>Hello, World!</title> </rect> </svg>

Sinon, si vous souhaitez vraiment afficher HTML dans votre SVG, vous pouvez intégrer directement HTML:

Demo: http://jsfiddle.net/ALjJb/3/

 <svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(20,30)"> <rect width="200" height="150"/> <foreignObject width="200" height="150"> <body xmlns="http://www.w3.org/1999/xhtml"> <div> Hello, <b>World</b>! </div> </body> </foreignObject> </g> </svg>

… mais alors vous auriez besoin de JS pour allumer et éteindre l'affichage. Comme indiqué ci-dessus, une façon de faire apparaître l'étiquette au bon endroit consiste à enrouler le rect et HTML dans le même <g> qui les positionne ensemble.

Pour utiliser JS pour trouver où un élément SVG est à l'écran, vous pouvez utiliser getBoundingClientRect() , par exemple http://phrogz.net/svg/html_location_in_svg_in_html.xhtml