Text Wrapping

wrapText(element, newText, force=false)

Wrap text in an svg text element.

Only wraps text if a ‘width’ or ‘data-width’ attribute is present on text element.

For multiline wrapping an additional ‘height’ or ‘data-height’ attribute is neccessary.

Partly uses css attributes ‘text-overflow’ and ‘word-break’ to determine how to wrap text.

Arguments:

  • element (SVGTextElement) –

  • newText (string) –

  • force (boolean) –

trim(text)

Trim trailing and leading whitespace

Arguments:

  • text (string) –

Returns:

string –

rTrim(text)

Trim trailing whitespace

Arguments:

  • text (string) –

Returns:

string –

lTrim(text)

Trim leading whitespace

Arguments:

  • text (string) –

Returns:

string –

wrapTextLines(text, newText, props, force)

Wrap the text based on a supplied lines definition.

The lines definition is a string containing the maximum widths of the lines to wrap text into. The widths can be floats, are seperated by single spaces and parsed with paseFloat . Multiple line definitions are seperated by a single ‘|’ character.

A line definition can optionally start with a scale (marked with an x directly after the number). The scale is returned as part of the line definition. It can be applied by scaleText() . To get a more intuitive scaling behaviour first reset the transform property and the transform origin with resetTextTransform() .

Arguments:

  • text (Selection<SVGTextElement, unknown, null, undefined>) –

  • newText (string) –

  • props (TextProperties) –

  • force (boolean) –

Returns:

LineWrappingDefinition –

resetTextTransform(text, isVerticallyCentered=false)

Reset the “transform” attribute and set a more useful transform origin for scaling text.

The new transform origin x position is the same as the text node x coordinate. This ensures that text will always scale towards the text anchor horizontally.

The new transform origin y position depends on the parameter isVerticallyCentered . If the text is centered vertically it is set to the mindpoint between the bbox top and bottom. If the text is not centered vertically then the bbox top is used.

Using this method before the text was wrapped may cause the transform origin to be in a weird place.

Arguments:

  • text (Selection<SVGTextElement, unknown, null, undefined>) –

  • isVerticallyCentered (boolean) –

scaleText(text, scale)

Scale a text element with the “transform” attribute.

This method preserves the content of the “transform” attribute by prepending the new scale!

Arguments:

  • text (Selection<SVGTextElement, unknown, null, undefined>) –

  • scale (number) –

centerTextVertically(text, centerY, multiline=false)

Center a svg text element vertically around the y coordinate specified in the ‘data-text-center-y’ attribute of the text element.

If the attribute is not set or cannot be parsed into a float this method does nothing.

If multiline is true then the “transform” attribute of the text node is used to translate the text. This method preserves the content of the “transform” attribute by prepending translation!

Arguments:

  • text (Selection<SVGTextElement, unknown, null, undefined>) –

  • centerY (number) –

  • multiline (boolean) –

Returns:

number –

calculateMultiline(text, height, x, y, force=false, linespacing='auto')

Calculate and create a multiline span group.

Arguments:

  • text (Selection<SVGTextElement, unknown, null, undefined>) –

  • height (number) –

  • x (number) –

  • y (number) –

  • force (boolean) –

  • linespacing (string) –

Returns:

Selection<SVGTSpanElement, number, SVGTextElement, unknown> –

wrapSingleLine(element, width, newText, mode='ellipsis', wordBreak='break-word', force=false)

Wrap text in a single line and return the overflow.

Arguments:

  • element (SVGTextElement|SVGTSpanElement) –

  • width (number) –

  • newText (string) –

  • mode (string) –

  • wordBreak (string) –

  • force (boolean) –

Returns:

string –