javascript - 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);

这是不行的，因为刻度标签上仅显示年份，而我想使用自定义格式。

这可以用 d3 实现吗？

Answer 1

你可以这样尝试

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