Javascript d3.js，如何创建带有自定义标签和自定义记号的轴？

我有一个类似的数组：

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

我想添加一个轴，其中我对每个年份值有一个记号（我可以使用tickValues和tickFormat），但是记号标签不仅是年份，而且有一个自定义格式，因此第一个数组元素的结果可能类似于“1999:5”

换言之：

我现在在哪里

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

这是不好的，因为只有年份显示在刻度的标签上，我想使用自定义格式

---

d3可以这样做吗？

您可以这样尝试

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

---

由于您的问题中没有显示比例，我们不知道您的比例类型以及域值。但有一件事是肯定的：你不能把整个对象传递给它。因此，您的

tickFormat

无法访问每个对象中的一个属性

一个简单的解决方案是使用记号的索引来获取其他属性，前提是您显示所有记号（并且使用顺序刻度）：

下面是一个演示：

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，100）；
风险值数据=[{
年份：1999年，
瓦尔：5
}, {
年份：2002年，
瓦尔：8
}, {
年份：2005年，
瓦尔：1
}, {
年份：2008年，
瓦尔：4
}, {
年份：2011年，
瓦尔：9
}, {
年份：2014年，
瓦尔：2
}];
var scale=d3.scalePoint（）
.范围（[20480]）
.domain（data.map）（函数（d）{
返回d.year
}));
变量轴=d3。轴底（刻度）
.1格式（函数（d，i）{
返回d+“：”+数据[i].val；
});
var gX=svg.append（“g”）
.attr（“变换”、“平移（0,50）”）
.呼叫（安讯士）
我现在能做的是：

d3.axisTop(xScale)
        .tickValues(data.map(d => d.year))
        .tickFormat((d, i) => data[i].val);

很难看，但它能用。如果我得到一个更好的解决方案，我会接受另一个。
很抱歉，我写了一段错误的代码，现在已经更正了。这个解决方案（正如我之前写的）无法工作，因为用于记号的数组元素不是数值。谢谢，我们一起发布了相同的解决方案！这有点难看，但这是我能想到的最好的办法。@heapOverflow我们的解决方案不一样。您的解决方案将仅在刻度上显示
val
值，并且在您的问题中，您明确要求在刻度中显示
年
和
val
。既然你说它有效，我只能假设你的问题措词不正确。。。在这种情况下，没有人能帮助你，因为预期的结果并不清楚。
d3.axisTop(xScale)
        .tickValues(data.map(d => d.year))
        .tickFormat((d, i) => data[i].val);