前言：

使用d3绘制时间轴图表，不可避免的涉及到动态变动时间刻度，根据业务需求需要调整查看不同的时间粒度数据。如果后台数据非连续数据，需要前端自己处理的话，就得自己根据时间范围创建时间刻度数据。

一、js根据时间范围创建时间刻度数据：

/*

*@params startDate 开始时间

*@params endDate 结束时间

*@params timeUnit 时间间隔,注意是毫秒数

**/

function createTimeUnitListByTimeRange(startDate, endDate, timeUnit){

let startSeconds = new Date(startDate).getTime();

let endSeconds = new Date(endDate).getTime();

// 必须用计算机初始时间的时间戳来作为基准点，否则时区会影响初始时间戳毫秒数

let base = new Date('1970-01-01 00:00:00').getTime();

let rangeTimeUnitList = [];

let firstDegree;

// 第一个刻度，可能刚好在你需要的整点刻度上，如果不在整点上，减去多余的部分，往前推一个刻度。

// 此处就是减掉基准时间戳再执行整除操作，否则如果以天为刻度，整除86400000，得到的第一个刻度会是包含时区的时间，如北京时间：2020-09-10 08：00：00

firstDegree = startSeconds - (startSeconds - base) % timeUnit;

rangeTimeUnitList.push(firstDegree);

// 当最后一个刻度大于截止时间，停止创建刻度数据

while(firstDegree

firstDegree += timeUnit;

rangeTimeUnitList.push(firstDegree);

}

return rangeTimeUnitList;

}

console.log(createTimeUnitListByTimeRange('2020-01-01','2020-09-10',86400000), '测试');

以上方法，亲测有效。注意一定要使用固定的时间作为基准点，否则以天为刻度时，会有时区差异。以秒和分钟作为时间粒度，没问题，因为是更小一级的单位，进行整除运算没有问题。

二、常用的时间刻度：

60000 分钟桶

600000 十分钟桶

3600000 小时桶

86400000 天桶

时间桶的概念，就是以该间隔作为时间刻度

三、多说一句

为什么我会前端处理时间轴数据？

相信如果使用过d3进行时间轴图表定制的同学，一定使用过d3.scaleTime或者d3.scaleUtc进行时间轴比例尺的绘制，它的智能之处，就是可以根据你的时间范围，动态的创建出适合当前显示区域坐标系的时间刻度数据，就算你的数据是不连续的，也没有问题。但是结合brush刷取api进行使用的时候就用问题了，当初始化数据不符合具体的刷取机制，进行刷取范围的默认设置，就会出现绘制图表不连续，移动刷取框更新图表错误的问题。(具体原因未知，有大神有相应的认知可以在评论群告知一波，非常感谢)

基于以上问题，我通过自己创建时间刻度，使用d3.scaleLinear 线性比例尺，结合brush进行缩放x轴，就没有任何问题，因为我的数据处理后都是连续的，每个时间刻度已经固定，规避了上面的问题。