d3plus-text

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

0.8.2
Source
npm

Version published: 8 years ago

Weekly downloads: 3.8K; increased by3.37%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

d3plus-text

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

Installing

If you use NPM, npm install d3plus-text. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom bundle using Rollup or your preferred bundler. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-text.v0.8.full.min.js"></script>

Getting Started

Without a doubt, the most commonly used aspect of this module is textBox, which is used for intelligently wrapping SVG text. At it's core, you can simply pass along data points with "text" values and the generator will add them to the page using a set of defaults. Here is a data array containing 3 different sentences to be wrapped:

var data = [
  {text: "Here is some sample text that has been wrapped using d3plus.textBox."},
  {text: "...and here is a second sentence!"},
  {text: "这是句3号。这也即使包装没有空格！"}
];

And finally, this is how that data array would be passed to the textBox generator.

d3plus.textBox()
  .data(data)
  .fontSize(16)
  .width(200)
  .x(function(d, i) { return i * 250; })
  ();

While textBox comes with some handy defaults, this example shows how any of the methods can be overridden with static values or accessor functions. For more information on how the textSplit function splits strings, specifically in languages that don't use spaces, check out this blog post.

Please note the () at the end of the chain of commands. This is what tells the textBox to finally render to the page, and allows setting multiple properties of the textBox without it trying to render after each one is set.

Click here to view this example live on the web.

More Examples

Automatic Font Resizing to Fit Container

API Reference

Functions

stringify(value): Coerces value into a String.
textBox([data]): Creates a wrapped text box based on an array of data. If data is specified, immediately wraps the text based on the specified array and returns this generator. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method. See this example for help getting started using the textBox function.
textSplit(sentence): Splits a given sentence into an array of words.
textWidth(text, [style]): 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.

stringify(value)

Coerces value into a String.

Kind: global function

Param	Type
value	`String`

textBox([data])

Creates a wrapped text box based on an array of data. If data is specified, immediately wraps the text based on the specified array and returns this generator. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method. See this example for help getting started using the textBox function.

Kind: global function

Param	Type	Default	Description
[data]	`Array`	`[]`	An array of text blocks to be wrapped.

textBox.config([value])

If value is specified, sets the methods that correspond to the key/value pairs and returns this generator. If value is not specified, returns the current configuration.