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)