Dynamic horizontal text spacing for tspan elements in d3

3 minutes read
d3
d3 • howto • canvas

Consider the following array of text elements:

const myFakeData = ["Alice","Eve","Satoshi"]

Naive approach to tspan horizontal placement with d3:

    var myHorizontalOffsetGuess  = 30;
    
    [... d3 code here ...]
    .attr('x', (d,i) => i * myHorizontalOffsetGuess)
    [... d3 code here ...]

(guess and check method trying different values of an offset constant)

This is not an ideal practice, especially when dealing with dynamic data.

Given an array of text data, how can we calculate x positions to avoid overlap?

The following function allows for the calculation of the width of each text element with one call to render a canvas element.

const addTextWidths = function(data) {
    // could pass font attributes as parameters to function instead
    let fontSize = 12
    let fontFace  = 'Arial'
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    // set up font and font face
    context.font = fontSize + 'px ' + fontFace;
    // initialize an array of text widths
    let widthsArray = []
    data.forEach(function(el,i) {
      widthsArray.push({text: el, width: context.measureText(el).width})
    });
    return widthsArray;
}

The code to calculate the x position of the tspan elements can be rewritten as follows:

    [... d3 code here ...]
    .attr('x', (d,i,nodes) => calculateLabelPosition)
    [... d3 code here ...]

The full array of the data bound to the tspan elements can be passed into each call to calculate x position by referring to the nodes parameter (passed by default).

function calculateLabelPositionX(d, i, nodes) {
    let yAxisPadding = 5
    let labelPadding = 12 // padding between each label
    if (i == 0) {
      return yAxisPadding 
    }
    let data = d3.selectAll(nodes).data().map(d => d.width)
    return data
      .slice(0,i)
      .reduce((a,b) => a + b) + yAxisPadding + labelPadding * i
}

And the final result: