D3 每 4 个月滴答一次，但从第一个域日期开始答案

【问题标题】：D3 ticks every 4 months but starting in first domain dateD3 每 4 个月滴答一次，但从第一个域日期开始
【发布时间】：2016-01-24 19:32:15
【问题描述】：

我想在 d3 中创建一个折线图，但我想每 4 个月显示一次刻度，因为我需要在图表中有数据的每个点上显示刻度。

我用过这个：

// xScale is a time scale obj d3.time.scale()

xAxis = d3.svg.axis()
  .scale(xScale)
  .ticks(d3.time.months, 4)
  .orient('bottom');

这可行，但刻度显示在我的数据中的初始日期后 2 天：

当第一个数据在 2014 年 12 月 30 日时，它显示在 2015 年 1 月 1 日

如何设置特定点的初始刻度和设置的 4 个月间隔？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我相信 d3 时间刻度会尝试均匀地间隔日期（我不确定是否有办法指定特定日期）。如果您确切知道要显示哪些日期，则可以使用 Ordinal Scale 并将日期作为输入。

【讨论】：

【解决方案2】：

您可以使用axis.tickValues 准确指定要显示的刻度值。例如，在我的一个项目中，我只希望每周的星期一显示为勾号，这是我的代码示例：

var xScale = d3.time.scale();

var xAxis = d3.svg.axis();
xAxis.scale(xScale);

var xAxisTicks = [];

var xAxisTickInterval = 7;
var millisecondsPerDay = 1000 * 60 * 60 * 24;

var currentMonday = new Date(currentStartTime);
while (currentMonday.getTime() <= currentEndTime)
{
    var currentMondayCopy = new Date(currentMonday.getTime());
    xAxisTicks.push(currentMondayCopy);

    currentMonday.setTime(currentMonday.getTime() + xAxisTickInterval * millisecondsPerDay);
}

xAxis.tickValues(xAxisTicks);

currentStartTime（总是保证是星期一）和currentEndTime 是我的图表当前显示的时间“窗口”的边界，在 JavaScript 的内部毫秒时间表示中。

【讨论】：