d3.js，我如何创建一个带有自定义标签和海关标记的轴？ [英] d3.js, how can i create an axis with custom labels and customs ticks?

问题描述

我有一个类似的数组：

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

我想添加一个轴，其中每个都有一个勾号年份值（我可以用tickValues和tickFormat做的事情），但是tick标签不仅是年份而且是自定义格式，因此第一个数组元素的结果可能类似于1999：5。

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.

改写它：

我现在在哪里

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.

这是否可以用d3？

推荐答案

你可以这样试试

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

这篇关于d3.js，我如何创建一个带有自定义标签和海关标记的轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！