D3.js 如何防止滴答声在d3图表中靠得太近

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

我遇到的问题是控制x轴上的滴答声的数量。在d3决定显示更少的滴答声之前，这些点在一起挤压得太厉害了。我想知道怎样才能更好地控制这一切

当我直接设置xaxis.ticks时，d3允许ticks靠得太近。当我设置xaxis.tickValues时，我需要做更多的数学运算，而不是控制点数。我想用滴答声，但也没用

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

那么，我如何防止勾号值变得如此接近，一般来说，特别是日期

---

谢谢

我使用的技巧仍然是根据窗口的宽度手动设置滴答声的数量

对于少量数据点，确保轴仍然显示一整天，因为它在可视化方面看起来更好（我觉得）：

假设我在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));

因此，滴答声（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轴。

感谢您的回答@mcProgrammer。最后，我还硬编码了滴答声的数量。这并没有我想象的那么令人失望，而且效果很好。

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;