Ich beginne mit d3.js und versuche ein Netzwerk-Diagramm zu erstellen, in dem jeder Kreis ein Label enthält.
Was ich will, ist ein Zeilenumbruch und ein Svg-Text.
Was ich versuche, ist, den Text in mehrere <tspan> s zu zerlegen, jede mit x="0" und Variable "y", um tatsächliche Textzeilen zu simulieren. Der Code, den ich geschrieben habe, liefert ein unerwartetes Ergebnis.
In diesem Code wird die Textzeichenfolge durch Leerzeichen getrennt und die einzelnen aufgeteilten Zeichenfolgen an tspan angehängt. Aber der Text, der zu einem anderen Kreis gehört, wird auch in jedem Kreis angezeigt. Wie man dieses Problem löst?
Hier ist ein JSFIDDLE Ссылка mit nur Svg-Text
Hier ist ein JSFIDDLE Ссылка , der mein Problem mit tspan zeigt.
Sie müssen die Position (oder den Versatz) jedes tspan -Elements angeben, um den Eindruck eines Zeilenumbrüchens zu erwecken - es sind wirklich nur Textcontainer, die Sie beliebig positionieren können. Dies wird viel einfacher, wenn Sie die Elemente text in g Elemente umbrechen, weil Sie dann "absolute" Koordinaten (d. H.% Co_de% und x ) für die Elemente darin angeben können. Dadurch wird es einfacher, die y -Elemente an den Anfang der Zeile zu verschieben.
Der Hauptcode zum Hinzufügen der Elemente würde so aussehen.
%Vor% Ich verwende tspan , was die Funktion für jedes Element aufruft und keinen Rückgabewert erwartet, anstelle des von Ihnen verwendeten .each() . Die Einstellung .text() bezeichnet die Zeilenhöhe und dy auf 0 bedeutet, dass jede neue Zeile am Anfang des Blocks beginnt.
Modified jsfiddle hier , zusammen mit einigen anderen kleineren Aufräumarbeiten.
Tags und Links javascript svg d3.js