d3.js Etikett innerhalb des Pfades verformt

Question

Ich habe ein Etikett erfolgreich in einen Pfad eingefügt, aber wenn ich versuche, dieses Etikett zu zentrieren, indem ich die Attribute x und dy manuell ändere. das Etikett verformt sich in der Mitte. hier ist ein Bild und der entsprechende Code. bevor die x Attribute ändern ihren Wert 135:

<svg width="1306" height="628"> 
<g> 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path> 
</g> 
<text x="135" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
</svg> 

nach dem x Attribute ändern neue Wert 145:

<svg width="1306" height="628"> 
<g> 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path> 
</g> 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
</svg> 

Answer 1

Es gibt nichts "deformiert" Hier. Das ist das erwartete Verhalten: Sie verwenden textPath, um den Text zu positionieren, und der Pfad, auf den Sie verweisen, ändert die Ausrichtung beim ersten L-Befehl.

Man kann deutlich sehen, dass es nichts falsch, wenn wir ein paar (rot) Linien zeichnen, um dieses „bend“ zeigt:

<svg width="400" height="300"> 
 
<g> 
 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path> 
 
</g> 
 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862" 
 
\t y2="555.2472222223878" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516" 
 
\t y2="527.049" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
</svg>

Und Sie können, wenn wir das noch besser sehen mehr Texte erstellen, die dy bis zu Ihrem Wert zu erhöhen (105):

<svg width="400" height="300"> 
 
<g> 
 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path> 
 
</g> 
 
<text x="145" dy="15"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="40"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="60"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="80"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862" 
 
\t y2="555.2472222223878" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516" 
 
\t y2="527.049" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
</svg>

Mögliche Lösung: alternativ können Sie eine Kurve zeichnen. Auf diese Weise wird der Text den Pfad ohne Pausen folgen:

<svg width="400" height="300"> 
 
<g> 
 
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path> 
 
</g> 
 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
</svg>