D3在x轴上嘀嗒错误

Question

我已尝试过一些东西，但是刻度和日期仍然是格式错误的。在其他图表上，我有它的工作但不是这个。如何将日期和刻度放得足够？

以下是我的代码的小提琴：http://jsfiddle.net/nv2qv2L2/

以下是刻度格式的代码：

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom").ticks(coverageArr.length).tickFormat(d3.time.format("%Y-%m-%d"));

Answer 1

通常在制作时间刻度时，您会使用d3.time.scale()，而不是顺序刻度。

1. 使用时间刻度显示时间轴。

   时间刻度可让您直接指定刻度所需的步骤。您可以通过将d3持续时间和时间间隔传递给轴的.ticks（）方法来实现。像这样：

   var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.day, 4)
   

   您将获得以下结果：

您可以找到有关时间间隔here的更多信息。

1. 使用序数比例显示时间轴。

   var tickValues = [];
   for(i = 0; i < coverageArr.length; i++) {
     tickValues.push(coverageArr[i][0]);
   }
   var x = d3.scale.ordinal().domain(tickValues).rangeRoundBands([0, width], 1)
   

   结果如下：