0

I have been working on creating a a cash thermometer that shows the progress for each month. I am having a problem with SVG text Wrapping and could use some help. The animation and everything else is set, I just cant get the text to wrap properly. Any help with this would be greatly appreciated. Below is the JS fiddle Link to my code. You'll notice that the text gets cut out and doesn't display properly.

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);
}
Corcorancr
  • 1
  • 1
  • 1
  • 2

2 Answers2

2

You need to wrap the text elements in a tspan tag. I made use of the wrap function from a solution which already exists here.

The changes I made was to your drawTick function, I added .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)

Check out my jsfiddle here

Joshua Duxbury
  • 4,892
  • 4
  • 32
  • 51
  • Could you please repost the link you sent. The one posted is my original code without the changes. Thank you very much for your help – Corcorancr Jul 21 '17 at 15:48
0

SVG text doesn't have any wrapping functionality. You will need to do it programmatically.

Artsiom Miksiuk
  • 3,896
  • 9
  • 33
  • 49