Adam
Hello. I have a long data label inside the radial progress bar with the data value. I’d like it to wrap to a second line. Normal <br/> or \n does not seem to work…presumably since SVG doesn’t like it. Can you provide an example to make text wrap or to make a line break at a given point work please? My code which does not work fully as it displays the <br> as text without expressing an actual line-break:
.label(function (d,i) {
return d3.format("+" + ".0f")(d) + "%" + "<br/>" + "Content Downloads"
});
Thank you!
vizuly
Hello Adam,
Unfortunately the SVG spec does not support line breaks natively for their text objects, which is what the Radial Progress uses.
In this case you will need to roll your own line break method. Here is a helpful link.
https://bl.ocks.org/mbostock/7555321
– Tom
Adam
Thank you Tom! Other than that one issue I really like the library!
vizuly
You are welcome Adam.
There is an experimental function in the vizuly source code you may want to play with. It can be found here:
src/svg/text.js
The function is:
vizuly.svg.text.wrap = function (text, value, lineHeight, width)
If you pass it the text object, the value, line height in pixels, and width in pixels, it will attempt to wrap it for you automatically.
This is experimental code, so use at your own risk!
– Tom
