d3 时间轴，只有几天的长间隔

Question

我需要绘制带有时间刻度的轴并在其上仅显示天数。这是我的代码：

            var xScale = d3.time.scale.utc()
            .domain([beginning, ending])
            .range([margin.left, availableWidth - margin.right]);

        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient(orient)
            .tickFormat(tickFormat)
            .ticks(d3.time.days.utc, 1)
            .tickSize(tickSize);

但是在很长的时间间隔内重叠不好（因为我显示了每个刻度）：

https://pp.vk.me/c620728/v620728099/16ab9/HdJByiakoKA.jpg

我做了一些数学运算并计算出可接受的刻度数：

var xAxis = d3.svg.axis()
            ...
            .ticks(d3.time.days.utc, stepTick) // for example 20 for a year interval
            .tickSize(tickSize);

因此轴上的每 20 个刻度将显示一年，看起来很棒！除了月份的联合：

https://pp.vk.me/c620728/v620728099/16aaf/PjM4KJ0ofTM.jpg (31.05/01.06)

月份联合的标签仍然重叠，因为在 d3.time.days 的文档中我们可以看到

如果指定了 step，则将返回每个 step'th 日期，基于月份的日期。

如何防止标签重叠？

Answer 1

似乎根据所需的刻度间距选择间隔会给您提供参考日期，但对破译图表没有太大帮助。您提供的图像中标记的日期（每个月的 6 日、11 日、16 日、21 日、26 日和 31 日）实际上会分散注意力。它们不能提供良好的参考点，因为它们唯一的意义在于它们以给定的间隔间隔开。

我建议当刻度标签变得拥挤时，您可以退回到仅使用几个标记在重要日期的刻度。每个月的开始似乎是一个合乎逻辑的选择。然后，您可以创建一些未标记的刻度，让您在阅读图表时更加精确。

This answer 提供了一种创建次要（未标记）刻度的好方法。您可以使该代码适应您的时间尺度。假设您想为每一天创建次要刻度：

d3.select('.axis.x').selectAll('line')
  .data(xScale.ticks(d3.time.days.utc,1), function(d) {return d;})
  .enter().append('line')
    .attr('class', 'day-ticks')
    .attr('y1', 0)
    .attr('y2', 5)
    .attr('x1', xScale)
    .attr('x2', xScale);

HERE 是一个演示，它会给你带来什么。

您可以更进一步，为每周创建中间刻度，以便在每个月内为您提供更好的上下文：

d3.select('.axis.x')
  .selectAll('line')
  .data(xScale.ticks(d3.time.days.utc,7), function(d) {return d;})
  .enter().append('line')
    .attr('class', 'week-ticks')
    .attr('y1', 0)
    .attr('y2', 8)
    .attr('x1', xScale)
    .attr('x2', xScale);

HERE 就是这个样子。