@d3plus/text

A smart SVG text box with line wrapping and automatic font size scaling.

Installing

If using npm, npm install @d3plus/text. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "@d3plus/text";

In vanilla JavaScript, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/text"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.

API Reference

• stringify - Coerces value into a String.
• strip - Removes all non ASCII characters from a string.
• textSplit - Splits a given sentence into an array of words.
• textWrap - Based on the defined styles and dimensions, breaks a string into an array of strings for each line of text.
• titleCase - Capitalizes the first letter of each word in a phrase/sentence, accounting for words in English that should be kept lowercase such as "and" or "of", as well as acronym that should be kept uppercase such as "CEO" or "TVs".
• trim - Cross-browser implementation of trim.
• trimLeft - Cross-browser implementation of trimLeft.
• trimRight - Cross-browser implementation of trimRight.

• fontFamily - The default fallback font list used for all text labels as an Array of Strings.
• fontFamilyStringify - Converts an Array of font-family names into a CSS font-family string.

d3plus.stringify(value) <>

Coerces value into a String.

This is a global function

d3plus.strip(value, [spacer]) <>

Removes all non ASCII characters from a string.

This is a global function

d3plus.textSplit(sentence) <>

Splits a given sentence into an array of words.

This is a global function

d3plus.textWrap() <>

Based on the defined styles and dimensions, breaks a string into an array of strings for each line of text.

This is a global function

• textWrap()
  • .fontFamily([value])
  • .fontSize([value])
  • .fontWeight([value])
  • .height([value])
  • .lineHeight([value])
  • .maxLines([value])
  • .overflow([value])
  • .split([value])
  • .width([value])

# d3plus..fontFamily([value]) <>

If value is specified, sets the font family accessor to the specified function or string and returns this generator. If value is not specified, returns the current font family.

This is a static method of textWrap

# d3plus..fontSize([value]) <>

If value is specified, sets the font size accessor to the specified function or number and returns this generator. If value is not specified, returns the current font size.

This is a static method of textWrap

# d3plus..fontWeight([value]) <>

If value is specified, sets the font weight accessor to the specified function or number and returns this generator. If value is not specified, returns the current font weight.

This is a static method of textWrap

# d3plus..height([value]) <>

If value is specified, sets height limit to the specified value and returns this generator. If value is not specified, returns the current value.

This is a static method of textWrap

# d3plus..lineHeight([value]) <>

If value is specified, sets the line height accessor to the specified function or number and returns this generator. If value is not specified, returns the current line height accessor, which is 1.1 times the font size by default.

This is a static method of textWrap

# d3plus..maxLines([value]) <>

If value is specified, sets the maximum number of lines allowed when wrapping.

This is a static method of textWrap

# d3plus..overflow([value]) <>

If value is specified, sets the overflow to the specified boolean and returns this generator. If value is not specified, returns the current overflow value.

This is a static method of textWrap

# d3plus..split([value]) <>

If value is specified, sets the word split function to the specified function and returns this generator. If value is not specified, returns the current word split function.

This is a static method of textWrap

# d3plus..width([value]) <>

If value is specified, sets width limit to the specified value and returns this generator. If value is not specified, returns the current value.

This is a static method of textWrap

d3plus.titleCase(str) <>

Capitalizes the first letter of each word in a phrase/sentence, accounting for words in English that should be kept lowercase such as "and" or "of", as well as acronym that should be kept uppercase such as "CEO" or "TVs".

This is a global function

d3plus.trim(str) <>

Cross-browser implementation of trim.

This is a global function

d3plus.trimLeft(str) <>

Cross-browser implementation of trimLeft.

This is a global function

d3plus.trimRight(str) <>

Cross-browser implementation of trimRight.

This is a global function

fontFamily <>

The default fallback font list used for all text labels as an Array of Strings.

This is a global constant

fontFamilyStringify <>

Converts an Array of font-family names into a CSS font-family string.

This is a global constant