时间戳

首页 > 解决方案 > 使用 D3.js 构建平面日历

d3.js - 使用 D3.js 构建平面日历

问题描述

无法理解这些数字在代码片段中的含义。源代码在链接中可用

if ((maxExtent - minExtent) > **1468800000**) {
        x1DateAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%a %d'))
        x1MonthAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%b - Week %W'))        
    }
    else if ((maxExtent - minExtent) > **172800000**) {
        x1DateAxis.ticks(d3.time.days, 1).tickFormat(d3.time.format('%a %d'))
        x1MonthAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%b - Week %W'))
    }
    else {
        x1DateAxis.ticks(d3.time.hours, 4).tickFormat(d3.time.format('%I %p'))
        x1MonthAxis.ticks(d3.time.days, 1).tickFormat(d3.time.format('%b %e'))
    }

标签： d3.js

解决方案

此代码指定在日期线/轴上放置刻度（单位）标记的间隔，以及每个刻度标记的标签格式。线所代表的周期越长，该线上刻度的粒度就越粗。

1468800000 是 17 天的毫秒数， 172800000 是 2 天的毫秒数。因此，跨度小于 2 天的日期线、跨度在 2 到 17 天之间的日期线以及跨度超过 17 天的日期线将获得不同的刻度间隔和标签。（好吧，在这种特定情况下，2-17 天和 >17 天的标签将采用相同的格式，但刻度的间隔将不同。）

推荐阅读