D3 Anhängen von Text an ein SVG-Rechteck

73

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?

javascript svg d3.js gbam
quelle

Antworten:

129

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 .

Adam Pearce
quelle
Ich wollte, dass mein Textfeld mit der Maus angezeigt wird, also habe ich eine Funktion dafür erstellt. Aber dies ist letztendlich ein Knoten und lässt mich nicht daran anhängen. Soll ich das also tun, wenn ich die Daten erstelle und sie dann nur ein- und ausblenden oder?
Gbam
Das könnte funktionieren. Wenn Sie den Maus-Listener an das g-Element anhängen, können Sie von dort aus problemlos anhängen.
Adam Pearce
Ahh, ich vermute, seit ich meinen Maus-Listener auf den Knoten gesetzt habe, gibt es mir g.node für meinen Aufruf dazu?
Gbam
g.node ist das, was Sie wollen, fügen Sie den Text hinzu.
Adam Pearce
8

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).

cbayram
quelle
Während dies dazu beitrug, das Element als Geschwister anzuhängen (der Geschwisterteil war das, was ich falsch gemacht habe), muss es eine elegantere Lösung geben, danke, dass ich es bis zum Ende gehackt habe?
Gbam
Nachdem ich mir stundenlang die Haare ausgerissen hatte, um ein Berührungsereignis für eine Korrektur auf ein bestimmtes Textobjekt abzubilden (einfach in Version 3, nicht so sehr in Version 4), stellte mich Ihre Geige vor nextSibling, was schließlich das Problem löste. Vielen Dank!
Martin