Text Wrapping Dynamic Font Resizing to Fit Container

A useful method when using text to label shapes (like in a tree map) is the fontResize method of the textBox class. When set to true, the text will attempt to scale up or down it’s font-size to best fit the containing shape.

var data = [
  {text: "This is a sentence that will not be resized.", resize: false},
  {text: "This is a sentence that will be resized.", resize: true}
];

Here, we can compare the output of using the fontResize method against the normal output, given a 200 x 100 rectangle boundary.

new d3plus.TextBox()
  .data(data)
  .fontResize(function(d) { return d.resize; })
  .height(100)
  .width(200)
  .x(function(d, i) { return i * 250; })
  .render();

The font-size calculated by this method is constrained by the fontMin and fontMax methods, which default to 8 and 50 respectively.