Awesome
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";
d3plus-text can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:
<script src="https://cdn.jsdelivr.net/npm/d3plus-text@1"></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. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. :beers:
API Reference
- fontExists - Given either a single font-family or a list of fonts, returns the name of the first font that can be rendered, or
falseif none are installed on the user's machine. - rtl - Returns
trueif the <html> or <body> element has either the "dir" HTML attribute or the "direction" CSS property set to "rtl". Accepts an optional DOM element as an argument, whose own inherited state will be evaluated rather than the default html/body logic. - 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.
- htmlDecode - Strips HTML and "un-escapes" escape characters.
- textWidth - Given a text string, returns the predicted pixel width of the string when placed into DOM.
- 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.
- trim - Cross-browser implementation of trim.
- trimLeft - Cross-browser implementation of trimLeft.
- trimRight - Cross-browser implementation of trimRight.
<a name="TextBox"></a>
TextBox <>
This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.
- TextBox ⇐ <code>BaseClass</code>
- new TextBox()
- .render([callback])
- .ariaHidden(value) ↩︎
- .data([data]) ↩︎
- .delay([value]) ↩︎
- .duration([value]) ↩︎
- .ellipsis([value]) ↩︎
- .fontColor([value]) ↩︎
- .fontFamily([value]) ↩︎
- .fontMax([value]) ↩︎
- .fontMin([value]) ↩︎
- .fontOpacity([value]) ↩︎
- .fontResize([value]) ↩︎
- .fontSize([value]) ↩︎
- .fontStroke([value]) ↩︎
- .fontStrokeWidth([value]) ↩︎
- .fontWeight([value]) ↩︎
- .height([value]) ↩︎
- .html([value = { i: 'font-style: italic;', em: 'font-style: italic;', b: 'font-weight: bold;', strong: 'font-weight: bold;' }]) ↩︎
- .id([value]) ↩︎
- .lineHeight([value]) ↩︎
- .maxLines([value]) ↩︎
- .overflow([value]) ↩︎
- .padding([value]) ↩︎
- .pointerEvents([value]) ↩︎
- .rotate([value]) ↩︎
- .rotateAnchor(_) ↩︎
- .select([selector]) ↩︎
- .split([value]) ↩︎
- .text([value]) ↩︎
- .textAnchor([value]) ↩︎
- .verticalAlign([value]) ↩︎
- .width([value]) ↩︎
- .x([value]) ↩︎
- .y([value]) ↩︎
<a name="new_TextBox_new" href="#new_TextBox_new">#</a> new TextBox()
Creates a wrapped text box for each point in an array of data. See this example for help getting started using the TextBox class.
<a name="TextBox.render" href="#TextBox.render">#</a> TextBox.render([callback]) <>
Renders the text boxes. If a callback is specified, it will be called once the shapes are done drawing.
This is a static method of <code>TextBox</code>.
<a name="TextBox.ariaHidden" href="#TextBox.ariaHidden">#</a> TextBox.ariaHidden(value) <>
If value is specified, sets the aria-hidden attribute to the specified function or string and returns the current class instance.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.data" href="#TextBox.data">#</a> TextBox.data([data]) <>
Sets the data array to the specified array. A text box will be drawn for each object in the array.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.delay" href="#TextBox.delay">#</a> TextBox.delay([value]) <>
Sets the animation delay to the specified number in milliseconds.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.duration" href="#TextBox.duration">#</a> TextBox.duration([value]) <>
Sets the animation duration to the specified number in milliseconds.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.ellipsis" href="#TextBox.ellipsis">#</a> TextBox.ellipsis([value]) <>
Sets the function that handles what to do when a line is truncated. It should return the new value for the line, and is passed 2 arguments: the String of text for the line in question, and the number of the line. By default, an ellipsis is added to the end of any line except if it is the first word that cannot fit (in that case, an empty string is returned).
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(text, line) {
return line ? text.replace(/\.|,$/g, "") + "..." : "";
}
<a name="TextBox.fontColor" href="#TextBox.fontColor">#</a> TextBox.fontColor([value]) <>
Sets the font color to the specified accessor function or static string, which is inferred from the DOM selection by default.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontFamily" href="#TextBox.fontFamily">#</a> TextBox.fontFamily([value]) <>
Defines the font-family to be used. The value passed can be either a String name of a font, a comma-separated list of font-family fallbacks, an Array of fallbacks, or a Function that returns either a String or an Array. If supplying multiple fallback fonts, the fontExists function will be used to determine the first available font on the client's machine.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontMax" href="#TextBox.fontMax">#</a> TextBox.fontMax([value]) <>
Sets the maximum font size to the specified accessor function or static number (which corresponds to pixel units), which is used when dynamically resizing fonts.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontMin" href="#TextBox.fontMin">#</a> TextBox.fontMin([value]) <>
Sets the minimum font size to the specified accessor function or static number (which corresponds to pixel units), which is used when dynamically resizing fonts.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontOpacity" href="#TextBox.fontOpacity">#</a> TextBox.fontOpacity([value]) <>
Sets the font opacity to the specified accessor function or static number between 0 and 1.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontResize" href="#TextBox.fontResize">#</a> TextBox.fontResize([value]) <>
Toggles font resizing, which can either be defined as a static boolean for all data points, or an accessor function that returns a boolean. See this example for a side-by-side comparison.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontSize" href="#TextBox.fontSize">#</a> TextBox.fontSize([value]) <>
Sets the font size to the specified accessor function or static number (which corresponds to pixel units), which is inferred from the DOM selection by default.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontStroke" href="#TextBox.fontStroke">#</a> TextBox.fontStroke([value]) <>
Sets the font stroke color for the rendered text.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontStrokeWidth" href="#TextBox.fontStrokeWidth">#</a> TextBox.fontStrokeWidth([value]) <>
Sets the font stroke width for the rendered text.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.fontWeight" href="#TextBox.fontWeight">#</a> TextBox.fontWeight([value]) <>
Sets the font weight to the specified accessor function or static number, which is inferred from the DOM selection by default.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.height" href="#TextBox.height">#</a> TextBox.height([value]) <>
Sets the height for each box to the specified accessor function or static number.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(d) {
return d.height || 200;
}
<a name="TextBox.html" href="#TextBox.html">#</a> TextBox.html([value = { i: 'font-style: italic;', em: 'font-style: italic;', b: 'font-weight: bold;', strong: 'font-weight: bold;' }]) <>
Configures the ability to render simple HTML tags. Defaults to supporting <b>, <strong>, <i>, and <em>, set to false to disable or provide a mapping of tags to svg styles
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.id" href="#TextBox.id">#</a> TextBox.id([value]) <>
Defines the unique id for each box to the specified accessor function or static number.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(d, i) {
return d.id || i + "";
}
<a name="TextBox.lineHeight" href="#TextBox.lineHeight">#</a> TextBox.lineHeight([value]) <>
Sets the line height to the specified accessor function or static number, which is 1.2 times the font size by default.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.maxLines" href="#TextBox.maxLines">#</a> TextBox.maxLines([value]) <>
Restricts the maximum number of lines to wrap onto, which is null (unlimited) by default.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.overflow" href="#TextBox.overflow">#</a> TextBox.overflow([value]) <>
Sets the text overflow to the specified accessor function or static boolean.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.padding" href="#TextBox.padding">#</a> TextBox.padding([value]) <>
Sets the padding to the specified accessor function, CSS shorthand string, or static number, which is 0 by default.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.pointerEvents" href="#TextBox.pointerEvents">#</a> TextBox.pointerEvents([value]) <>
Sets the pointer-events to the specified accessor function or static string.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.rotate" href="#TextBox.rotate">#</a> TextBox.rotate([value]) <>
Sets the rotate percentage for each box to the specified accessor function or static string.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.rotateAnchor" href="#TextBox.rotateAnchor">#</a> TextBox.rotateAnchor(_) <>
Sets the anchor point around which to rotate the text box.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.select" href="#TextBox.select">#</a> TextBox.select([selector]) <>
Sets the SVG container element to the specified d3 selector or DOM element. If not explicitly specified, an SVG element will be added to the page for use.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.split" href="#TextBox.split">#</a> TextBox.split([value]) <>
Sets the word split behavior to the specified function, which when passed a string is expected to return that string split into an array of words.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.text" href="#TextBox.text">#</a> TextBox.text([value]) <>
Sets the text for each box to the specified accessor function or static string.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(d) {
return d.text;
}
<a name="TextBox.textAnchor" href="#TextBox.textAnchor">#</a> TextBox.textAnchor([value]) <>
Sets the horizontal text anchor to the specified accessor function or static string, whose values are analagous to the SVG text-anchor property.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.verticalAlign" href="#TextBox.verticalAlign">#</a> TextBox.verticalAlign([value]) <>
Sets the vertical alignment to the specified accessor function or static string. Accepts "top", "middle", and "bottom".
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class.
<a name="TextBox.width" href="#TextBox.width">#</a> TextBox.width([value]) <>
Sets the width for each box to the specified accessor function or static number.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(d) {
return d.width || 200;
}
<a name="TextBox.x" href="#TextBox.x">#</a> TextBox.x([value]) <>
Sets the x position for each box to the specified accessor function or static number. The number given should correspond to the left side of the textBox.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(d) {
return d.x || 0;
}
<a name="TextBox.y" href="#TextBox.y">#</a> TextBox.y([value]) <>
Sets the y position for each box to the specified accessor function or static number. The number given should correspond to the top side of the textBox.
This is a static method of <code>TextBox</code>, and is chainable with other methods of this Class. default accessor
function(d) {
return d.y || 0;
}
<a name="fontExists"></a>
d3plus.fontExists(font) <>
Given either a single font-family or a list of fonts, returns the name of the first font that can be rendered, or false if none are installed on the user's machine.
This is a global function.
<a name="rtl"></a>
d3plus.rtl([elem]) <>
Returns true if the <html> or <body> element has either the "dir" HTML attribute or the "direction" CSS property set to "rtl". Accepts an optional DOM element as an argument, whose own inherited state will be evaluated rather than the default html/body logic.
This is a global function.
<a name="stringify"></a>
d3plus.stringify(value) <>
Coerces value into a String.
This is a global function.
<a name="strip"></a>
d3plus.strip(value, [spacer]) <>
Removes all non ASCII characters from a string.
This is a global function.
| Param | Type | Default | Description |
|---|---|---|---|
| value | <code>String</code> | ||
| [spacer] | <code>String</code> | <code>"-"</code> | The character(s) to be used in place of spaces. |
<a name="textSplit"></a>
d3plus.textSplit(sentence) <>
Splits a given sentence into an array of words.
This is a global function.
<a name="htmlDecode"></a>
d3plus.htmlDecode(input) <>
Strips HTML and "un-escapes" escape characters.
This is a global function.
<a name="textWidth"></a>
d3plus.textWidth(text, [style]) <>
Given a text string, returns the predicted pixel width of the string when placed into DOM.
This is a global function.
| Param | Type | Description |
|---|---|---|
| text | <code>String</code> | <code>Array</code> | Can be either a single string or an array of strings to analyze. |
| [style] | <code>Object</code> | An object of CSS font styles to apply. Accepts any of the valid CSS font property values. |
<a name="textWrap"></a>
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.
<a name="textWrap.fontFamily" href="#textWrap.fontFamily">#</a> 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 <code>textWrap</code>.
<a name="textWrap.fontSize" href="#textWrap.fontSize">#</a> 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 <code>textWrap</code>.
<a name="textWrap.fontWeight" href="#textWrap.fontWeight">#</a> 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 <code>textWrap</code>.
<a name="textWrap.height" href="#textWrap.height">#</a> 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 <code>textWrap</code>.
<a name="textWrap.lineHeight" href="#textWrap.lineHeight">#</a> 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 <code>textWrap</code>.
<a name="textWrap.maxLines" href="#textWrap.maxLines">#</a> d3plus..maxLines([value]) <>
If value is specified, sets the maximum number of lines allowed when wrapping.
This is a static method of <code>textWrap</code>.
<a name="textWrap.overflow" href="#textWrap.overflow">#</a> 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 <code>textWrap</code>.
<a name="textWrap.split" href="#textWrap.split">#</a> 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 <code>textWrap</code>.
<a name="textWrap.width" href="#textWrap.width">#</a> 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 <code>textWrap</code>.
<a name="titleCase"></a>
d3plus.titleCase(str) <>
Capitalizes the first letter of each word in a phrase/sentence.
This is a global function.
<a name="trim"></a>
d3plus.trim(str) <>
Cross-browser implementation of trim.
This is a global function.
<a name="trimLeft"></a>
d3plus.trimLeft(str) <>
Cross-browser implementation of trimLeft.
This is a global function.
<a name="trimRight"></a>
d3plus.trimRight(str) <>
Cross-browser implementation of trimRight.
This is a global function.