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的文档中我们可以看到

如果指定了步骤，则将根据月中的某天返回每个步骤的日期。

如何防止标签重叠？

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就是这样。

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

1 个答案: