Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

d3plus-text

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3plus-text

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

0.9.7
Source
npm

Version published: 8 years ago

Weekly downloads: 3.2K; decreased by-24.55%

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.9.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.

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

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.
strip(value): Removes all non ASCII characters from a string.
TextBox() ⇐ BaseClass: Creates a wrapped text box for each point in an array of data. 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.
titleCase(str, [opts]): Capitalizes the first letter of each word in a phrase/sentence.

stringify(value)

Coerces value into a String.

Kind: global function

Param	Type
value	`String`

strip(value)

Removes all non ASCII characters from a string.

Kind: global function

Param	Type
value	`String`

TextBox() ⇐ `BaseClass`

Creates a wrapped text box for each point in an array of data. See this example for help getting started using the textBox function.

Kind: global function
Extends: BaseClass

TextBox.render([callback])

Renders the text boxes. If a callback is specified, it will be called once the shapes are done drawing.