如何防止滴答离响应式d3图表太近

Question

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

我遇到的问题是控制x轴上的刻度数。在d3决定显示更少的刻度之前，这些点挤在一起太多了。我在想我怎样才能更好地控制这件事。

当我直接设置xaxis.ticks时，d3允许tick离得太近。当我设置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(Math.max/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轴。