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));

所以滴答声（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轴。

如何防止滴答声过于靠近以获得响应式d3图表

1 个答案: