js根据时间范围生成时间刻度数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js根据时间范围生成时间刻度数据相关的知识,希望对你有一定的参考价值。
参考技术A 使用d3绘制时间轴图表,不可避免的涉及到动态变动时间刻度,根据业务需求需要调整查看不同的时间粒度数据。如果后台数据非连续数据,需要前端自己处理的话,就得自己根据时间范围创建时间刻度数据。以上方法,亲测有效。注意一定要使用固定的时间作为基准点,否则以天为刻度时,会有时区差异。以秒和分钟作为时间粒度,没问题,因为是更小一级的单位,进行整除运算没有问题。
时间桶的概念,就是以该间隔作为时间刻度
为什么我会前端处理时间轴数据?
相信如果使用过d3进行时间轴图表定制的同学,一定使用过 d3.scaleTime 或者 d3.scaleUtc 进行时间轴比例尺的绘制,它的智能之处,就是可以根据你的时间范围,动态的创建出适合当前显示区域坐标系的时间刻度数据,就算你的数据是不连续的,也没有问题。但是结合brush刷取api进行使用的时候就用问题了,当初始化数据不符合具体的刷取机制,进行刷取范围的默认设置,就会出现绘制图表不连续,移动刷取框更新图表错误的问题。(具体原因未知,有大神有相应的认知可以在评论群告知一波,非常感谢)
基于以上问题,我通过自己创建时间刻度,使用 d3.scaleLinear 线性比例尺,结合brush进行缩放x轴,就没有任何问题,因为我的数据处理后都是连续的,每个时间刻度已经固定,规避了上面的问题。
以上是关于js根据时间范围生成时间刻度数据的主要内容,如果未能解决你的问题,请参考以下文章