以上方法，亲测有效。注意一定要使用固定的时间作为基准点，否则以天为刻度时，会有时区差异。以秒和分钟作为时间粒度，没问题，因为是更小一级的单位，进行整除运算没有问题。
时间桶的概念，就是以该间隔作为时间刻度
为什么我会前端处理时间轴数据？
相信如果使用过d3进行时间轴图表定制的同学，一定使用过 d3.scaleTime 或者 d3.scaleUtc 进行时间轴比例尺的绘制，它的智能之处，就是可以根据你的时间范围，动态的创建出适合当前显示区域坐标系的时间刻度数据，就算你的数据是不连续的，也没有问题。但是结合brush刷取api进行使用的时候就用问题了，当初始化数据不符合具体的刷取机制，进行刷取范围的默认设置，就会出现绘制图表不连续，移动刷取框更新图表错误的问题。（具体原因未知，有大神有相应的认知可以在评论群告知一波，非常感谢）
基于以上问题，我通过自己创建时间刻度，使用 d3.scaleLinear 线性比例尺，结合brush进行缩放x轴，就没有任何问题，因为我的数据处理后都是连续的，每个时间刻度已经固定，规避了上面的问题。
系统时间一般是值服务端时间，js获取服务端时间的方法是直接用ajax获取。
编写显示时间的页面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>Server date/time</title>
<script language="javascript" src="serverDate.js"></script>
</head>
<script language="javascript">
var localTime = new Date()
document.write("Local machine time is: " + localTime + "<br>")
document.write("Server time is: " + date)
</script>
<body>
</body>
ajax脚本获取server的时间
var xmlHttp
function srvTime(){
try {
//创建xmlHttp对象
xmlHttp = new XMLHttpRequest()
}
catch (err1) {
//ie浏览器
try {
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP')
}
catch (err2) {
try {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
catch (eerr3) {
//ajax不支持
alert("AJAX not supported")
}
}
}
//打开xmlHttp请求
xmlHttp.open('HEAD',window.location.href.toString(),false)
//设置xmlHttp请求头
xmlHttp.setRequestHeader("Content-Type", "text/html")
//发送请求
xmlHttp.send('')
// 获取response中的Date参数
return xmlHttp.getResponseHeader("Date")
}
var st = srvTime()//服务器时间赋值给st变量
var date = new Date(st)//转换js的date对象
// 输出服务器时间
document.write("服务器时间: " + date)
拓展资料：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
语句：JavaScript程序是由若干语句组成的，语句是编写程序的指令。JavaScript提供了完整的基本编程语句，
它们是：赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do...while循环语句、break循环中止语句、continue循环中断语句、with语句、try…catch语句、if语句（if..else，if…else if…）。
