textWrap

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

Basic example

textWrap() returns a generator: configure it, then call it with a string. width(200) is the only setting here, so the sentence is broken into as many 200px lines as it needs at the default 10px font, and widths reports the measured pixel width of each line.

import {textWrap} from "@d3plus/text";

const wrap = textWrap().width(200);
wrap(
  "The quick brown fox jumps over the lazy dog while the sun sets behind the hills.",
);

Circle shape

shape("circle") limits each line to the chord of the circle at that line’s height, so lines near the top and bottom are shorter than those through the middle. This is how labels fit inside Pack and Pie shapes.

import {textWrap} from "@d3plus/text";

const wrap = textWrap().shape("circle").width(220).height(220).fontSize(14);
wrap(
  "The quick brown fox jumps over the lazy dog while the sun sets behind the hills.",
);

Font styling

fontSize, fontWeight, and fontFamily feed the measurement, so a bold 18px Inter line holds fewer words than the 10px default. The result re-measures once the web font has loaded.

import {textWrap} from "@d3plus/text";

const wrap = textWrap()
  .width(240)
  .fontSize(18)
  .fontWeight(700)
  .fontFamily("Inter");
wrap(
  "The quick brown fox jumps over the lazy dog while the sun sets behind the hills.",
);

Max lines truncation

maxLines(2) keeps only the first two lines and sets truncated: true so a caller such as TextBox knows to add an ellipsis.

import {textWrap} from "@d3plus/text";

const wrap = textWrap().width(160).maxLines(2);
wrap(
  "The quick brown fox jumps over the lazy dog while the sun sets behind the hills.",
);

Parameters

import {textWrap} from "@d3plus/text";

Takes no parameters.