时间戳

首页 > 解决方案 > d3js 时间线——在擦洗日为日期和时间生成清晰的粒度视图

d3.js - d3js 时间线——在擦洗日为日期和时间生成清晰的粒度视图

问题描述

我正在构建一个时间线图 - 当画笔变小到 1 天的范围时，它会在顶部更改其日期比例 - 但是当它达到这种模式时 - 标签重叠并且看起来很乱，直到你达到 12小时传播。

清理此功能使其不重叠的最佳方法是什么。我想有 1 行显示日期 - 另一行显示该级别的小时数。

https://jsfiddle.net/aLh9d51t/

在此处输入图像描述

    var tFormat = '%Y-%m';
    var tTick = 'timeMonth';
    if (days < 40) {
        tFormat = '%Y-%m-%d';
        tTick = 'timeWeek';
    }

    if (days <= 7) {
        tFormat = '%Y-%m-%d';
        tTick = 'timeDay';
    }

    if (days <= 1) {
        tFormat = '%Y-%m-%d %H%p';
        tTick = 'timeHour';
    }

标签： d3.js

解决方案

首先，您可以尽可能隐藏日期的冗余部分：仅当可见多个时才显示年、月、日。所以当你显示小时和分钟时，你绝对不需要年和月。
看看默认的 d3 轴如何处理这个（例如https://bl.ocks.org/mbostock/1166403）。

其次，考虑到您的图表具有固定宽度，您可以针对不同的缩放级别微调不同的格式（您已经在代码片段中这样做了）。

看看这个例子：http
://bl.ocks.org/oluckyman/6199145 它的逻辑与你的代码片段相似： https ://gist.github.com/oluckyman/6199145#file-axisdaysview-js- L33-L58
但是选择哪种格式取决于图表宽度： https ://gist.github.com/oluckyman/6199145#file-axisdaysview-js-L72-L75

第三，如果由于某种原因您限制使用长标签，您可以将它们旋转到 30°-45°

这也可能有用：https ://bl.ocks.org/mbostock/4149176

推荐阅读