SVGテキストの折り返し

Question

私は、毎月の進捗状況を示す現金温度計の作成に取り組んでいます。私はSVGテキストの折り返しに問題があり、いくつかの助けを使うことができます。アニメーションとそれ以外はすべて設定されていますが、テキストを適切に折り返すことはできません。これに関する助けがあれば大いに感謝します。以下は私のコードへのJSフィドルリンクです。テキストが途切れて正しく表示されないことがわかります。

https://jsfiddle.net/corcorancr/4pto1wm5/1/

//-- Draw Goal line 
if (this.currentProgress >= this.currentGoal) { 
    this.drawTick(maxTemp, "Goal of " + this.currentGoal + " Reached! " + this.currentProgress + " receieved!", "Black", 0, width, tubeWidth, tubeBorderColor, scale, svg); 
} else { 
    this.drawTick(maxTemp + 3, "Goal: " + this.currentGoal, "black", 0, width, tubeWidth, "Black", scale, svg); 
    this.drawTick(percentageOfGoal, "Current: " + this.currentProgress, this.getMercuryColor(t), 0, width, tubeWidth, tubeBorderColor, scale, svg); 
} 

Answer 1

SVGのテキストは、任意の折り返し機能を持っていません。あなたはプログラムでそれを行う必要があります。

Answer 2

テキスト要素をtspanタグで囲む必要があります。私は既に存在する解決策からwrap関数を利用しましたhere。

私が行った変更は、あなたのdrawTick関数にした、私は.call(wrap,30,label)

svg.append("text") 
    .attr("x", width/2 + tubeWidth/2 + 15) 
    .attr("y", scale(t)) 
    .attr("dy", "0em") 
    .text(label) 
    .style("fill", labelColor) 
    .style("stroke", "black") 
    .style("font-size", "16px") 
    .call(wrap,30,label) 

を追加私のjsfiddleをチェックhere