javascript - 如何使用日期对象作为线性轴的刻度标签？

Question

我尝试过使用 d3 时间轴，是的，这个问题可以通过使用 d3 时间轴解决，但还有很多其他问题我无法处理。另一方面，线性轴似乎只存在刻度标签的问题。

我的刻度标签有一个充满日期对象的数组 - dateTickValues

console.log(dateTickValues)

返回

Thu Jan 01 2015 05:30:00 GMT+0530 (IST),Fri Jan 02 2015 05:30:00 GMT+0530 (IST),Sat Jan 03 2015 05:30:00 GMT+0530 (IST),Sun Jan 04 2015 05:30:00 GMT+0530 (IST),Mon Jan 05 2015 05:30:00 GMT+0530 (IST),Tue Jan 06 2015 05:30:00 GMT+0530 (IST)

但是当我使用

时

var xScale = d3.scale.linear()
.domain([0, no_of_ticks])
.range([0, width]);


var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(no_of_ticks) //computed elsewhere in the code - clean
.tickValues(dateTickValues)
.orient("top");

结果图表上的刻度标签为空 - 即没有出现刻度标签。

为什么会发生这种情况以及如何解决它？

Answer 1

关键是使用.tickFormat() function 。我不清楚你到底想做什么，所以这里有两个版本。

首先，您可以将 Date 对象本身与比例一起使用，然后 .tickFormat() 类似于

.tickFormat(function(d) { return d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(d)); });

完整演示 here .

如果您使用带有比例尺的日期数组的索引，它会类似于

.tickFormat(function(d, i) { return d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(dates[i])); });

完整演示 here .

另外一点，同时使用 .ticks() 和 .tickValues() 是没有意义的——您可能只需要 .tickValues().