d3.js,我如何创建一个带有自定义标签和海关标记的轴？

Question

我有一个类似于这样的数组:

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

并且我想添加一个轴,其中我每年都有一个刻度值(我可以用tickValues和tickFormat做)但是刻度标签不仅是年份而是具有自定义格式,因此结果可能类似于第一个数组元素的"1999:5".

改写一下:

我现在在哪里

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

这不好,因为只有年份在tick的标签上可视化,我想使用自定义格式.

这可能与d3有关吗？

Answer 1

你可以这样试试

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