d3.js, how can i create an axis with custom labels and customs ticks?

Question

I have an array similar to this:

[{year: 1999, val: 5}, {year: 2002, val: 8}]

and I would like to add an axis where I have one tick for each year value (something I can do with tickValues and tickFormat) but where the tick label is not only the year but has a custom format, so the result could be something like "1999: 5" for the first array element.

To rephrase it:

Where I'm now

const xAxis = d3.axisTop(xScale)
        .tickValues(data.map(d => d.year);

This is not ok because only the year is visualized on the label of the tick and I would like to use a custom format.

Is this possible with d3?

Answer 1

You could try like this

const xAxis = d3.axisTop(xScale)
        .tickValues(data)
        .tickFormat(d => (d.year +":"+ d.val));