D3 Anhängen von Text an ein SVG-Rechteck

Ich möchte HTML an ein Rechteck in D3 anhängen, um einen mehrzeiligen Tooltip zu erhalten. Im unteren Teil füge ich ein Rechteck hinzu, das möglicherweise Teil des Problems ist. Die Spitze ist der Code, der in meiner Welt funktionieren sollte.

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

Was ein Textfeld in die SVG einfügt, wird einfach nicht angezeigt:
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>

Ich habe eine Mouse-Over-Funktion, die Folgendes ausführt:

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

Ich denke, ich sollte das tun, aber es funktioniert nicht. Es entfernt nur den g.node, an den ich anhängen möchte.

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

Frage: Warum erscheint mein Text nicht? Ich habe versucht, .html, .textArea. Ich möchte eine mehrzeilige Beschriftung, damit ich nicht denke, dass .text richtig funktioniert. Wie soll ich das Rechteck anhängen?

A rectkann kein textElement enthalten . Transformieren Sie stattdessen ein gElement mit der Position von Text und Rechteck und hängen Sie dann sowohl das Rechteck als auch den Text an:

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

Mehrzeilige Beschriftungen sind ebenfalls etwas knifflig. Vielleicht möchten Sie diese Umbruchfunktion ausprobieren .

Haben Sie das SVG- Textelement ausprobiert ?

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

Das rechte Element erlaubt kein Textelement darin. Es sind nur beschreibende Elemente (<desc>, <metadata>, <title>) und Animationselemente (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>)zulässig.

Fügen Sie das Textelement als Geschwister hinzu und arbeiten Sie an der Positionierung.

AKTUALISIEREN

Mit g Gruppierung, wie wäre es so etwas? Geige

Sie können die Logik sicherlich in eine CSS-Klasse verschieben, an die Sie sie anhängen können, und sie aus der Gruppe entfernen (this.parentNode).