D3 ajout de texte à un Rectangle SVG

Je cherche à ajouter du html sur un rectangle dans 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 sommet est le code qui devrait fonctionner dans mon monde.

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

Qui insère un champ de texte dans le SVG, il ne s'affiche tout simplement pas:
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 souris sur la fonction qui exécute ce qui 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 le faire mais ça ne marche pas. Il supprime simplement le g.nœud que j'essaie de joindre.

    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'apparaît-il pas? J'ai essayé de .HTML, .textArea. Je veux une étiquette à plusieurs lignes, donc je ne pense pas .le texte fonctionnera correctement? Aussi, comment devrais-je ajouter le rectangle?

51
demandé sur royhowie 2013-12-18 00:51:43

2 réponses

Un rect ne peut pas contenir une text élément. Au lieu de cela, transformez un élément g avec l'emplacement du texte et du rectangle, puis ajoutez-y à 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 délicates, vous voudrez peut-être vérifier cette fonction wrap.

103
répondu Adam Pearce 2013-12-17 21:06:06

Avez-vous essayé le SVG texte élément?

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

Rect l'élément n'a pas permis de text élément à l'intérieur d'elle. Il permet uniquement d'éléments descriptifs (<desc>, <metadata>, <title>) et les animations (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>)

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

Mise à jour

En utilisant G groupement, Que diriez-vous de quelque chose comme ça? violon

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

7
répondu cbayram 2013-12-17 22:46:05