d3.js - 对于响应式 d3 图表，如何防止刻度过于靠近

Question

我有一个带有折线图的图表。 x 轴是日期。该图表显示在移动设备和桌面浏览器上。所以图表需要适本地缩放。该图表显示用户事件。当它们是新的时，x 轴上只有一个点。随着时间的推移，点数会变大。

我遇到的问题是控制 x 轴上的刻度数。在 d3 决定显示更少的刻度之前，这些点挤在一起太多了。我想知道如何更好地控制它。

当我直接设置 xaxis.ticks 时，d3 允许刻度靠得太近。当我设置 xaxis.tickValues 时，我必须做比我想控制点数更多的数学运算。我想过使用 tickPadding，但也没用。

我还考虑过使用 d3.time.mondays 为跨越很长一段时间的图表仅显示周边界。但是 a) 当只有少量点并且在足够长的时间段内它可能会遇到相同的基本问题时，这看起来不太好。

那么，我该如何防止刻度值变得如此接近，一般来说，具体是针对日期？

谢谢!

Answer 1

我使用的技巧仍然是根据窗口的宽度手动设置刻度数。

并且，对于少量的数据点，确保轴仍然显示一整天，因为它在可视化中看起来更好(我感觉):

var dataExtendedDates = dataFeverGraph.slice(0);
dataExtendedDates.unshift({
    temperature: 0, 
    date: dataFeverGraph[0].date.substr(0,10) + ' 00:00:00'
});
dataExtendedDates.push({
    temperature: 0, 
    date: dataFeverGraph[dataFeverGraph.length-1].date.substr(0,10) + ' 23:59:59'
});

假设我在 dataFeverGraph 变量中有一组 {temperature, date} 形式的数据。我将它切片(以创建一个克隆)，将第一个日期的午夜添加为第一个元素(假设 dataFeverGraph 具有按日期升序排序的对象)并将最后一个日期的 23:59 添加为最后一个元素。我将使用 dataFeverGraph 数据集进行所有常规操作，例如创建线、圆圈作为数据点的点等；但我将为轴使用 dataExtendedDates。

因此，使用 dataExtendedDates 设置 x 轴:

var xScale = d3.time.scale()
        .range([0,width])
        .domain(d3.extent(dataExtendedDates, function(d) { 
              return formatDate.parse(d.date); }));

现在只需根据宽度限制 x 轴上的刻度数:

var createXaxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom')
        .ticks(Math.max(width/50,2));

所以 ticks(Math.max(width/50,2)) 应该可以解决问题。这当然假设您最初是根据窗口的实际宽度设置宽度，例如像这样:

var margin = { top: 20, right: 30, bottom: 40, left:50 };
var height = 300 - margin.top - margin.bottom;
var width = document.getElementById("temperature_chart").clientWidth - margin.left - margin.right;

它还不是“响应式”的，但它应该在初始渲染时创建一个更好看的 x 轴。