js根据时间范围生成时间刻度数据

JavaScript021

js根据时间范围生成时间刻度数据,第1张

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

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

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

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

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

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

TimelineJS 是一个开源库，可以帮助你创建精美、可交互的时间轴。它可以使用Google试算表或基于JSON的REST后端作为数据来源。它可以处理不同种类的内容，从多个来源获取媒体文件，包括：

Twitter

Google Plus

Flickr

Youtube , Vimeo , DailyMotion

Google Maps

Chronoline.js

依赖其他库 jQuery qTip2 Raphael

使用它的时候，大概需要这样的配置

配置项的这些参数描述了我们使用这个时间轴时，它的显示外观，包扩显示的具体时间格式，刻度的显示，刻度标签的格式，时间轴的时间跨度，滚动一次的时间跨度，可以说配置说明书要看的非常多了，可以试下修改配置项，你会惊呆的，简直不要太强大。