D3 Ajout de texte sur un rectangle SVG

Je cherche à ajouter html sur un rectangle en D3 pour me donner une info-bulle à plusieurs lignes. La partie inférieure est la façon dont j'ajoute un rectangle qui peut faire partie du problème. Le top est le code qui devrait fonctionner dans mon monde.

newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>"); 

Ce qui insère un champ de texte dans le SVG, il ne s'affiche pas simplement:
HTML :

 <rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red"> <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea> </rect> 

J'ai une fonction sur la souris qui fonctionne comme suit:

  newRect = svg.append("rect") .attr("x", xCor) .attr("y", yCor) .attr("width", 130) .attr("height", 160) .attr("fill", "red") .attr("id", "rectLabel"); 

Je pense que je devrais faire cela, mais ça ne marche pas. Il supprime simplement le nœud g. Que j'essaie d'ajouter.

  newRect = $(this).enter().append("rect") .attr("x", xCor) .attr("y", yCor) .attr("width", 130) .attr("height", 160) .attr("fill", "red") .attr("id", "rectLabel"); 

Question: Pourquoi mon texte n'est-il pas affiché? J'ai essayé .html, .textArea. Je veux une étiquette à plusieurs lignes, donc je ne pense pas. Le texte fonctionnera correctement? De plus, comment puis-je ajouter le rectangle?

Un rect ne peut pas contenir un élément de text . Au lieu de cela, transformez un élément g par l'emplacement du texte et du rectangle, puis ajoutez à la fois le rectangle et le texte:

 var bar = chart.selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); bar.append("rect") .attr("width", x) .attr("height", barHeight - 1); bar.append("text") .attr("x", function(d) { return x(d) - 3; }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { return d; }); 

http://bl.ocks.org/mbostock/7341714

Les étiquettes multi-lignes sont également un peu compliquées, vous voudrez peut-être vérifier cette fonction .

Avez-vous essayé l'élément de texte SVG?

 .append("text").text(function(d, i) { return d[whichevernode];}) 

L' élément rect ne permet pas l'élément de texte à l' intérieur de celui-ci. Il ne permet que des éléments descriptifs ( <desc>, <metadata>, <title> ) et des éléments d'animation ( <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set> )

Ajouter l'élément de texte en tant que frère et sœur et travailler sur le positionnement.

METTRE À JOUR

En utilisant le groupement g , qu'en est-il de quelque chose comme ça? violon

Vous pouvez certainement déplacer la logique vers une classe CSS à laquelle vous pouvez ajouter, supprimer du groupe (this.parentNode)