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()。

如何将日期对象用作线性轴的刻度标签？

1 个答案: