Resizing Text to Fill 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()
  .fontResize(function(d) { return d.resize; })
  .x(function(d, i) { return i * 250; })

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