主要利用基于svg的d3.js这个数据可视化的库实现的
实现思路
1.首先画出中间的时间轴刻度
画出时间轴以后,就能把我们每个时间,开始画斜线的起始点给确定了,就是图中红点标出的位置
2.根据三角形的正切函数原理来计算斜线的点
三角形的角度我们固定成75度,右边的高我们也可以固定
因为每个二级子节点的高度是一样,他们的间距也是一样的,第一个子节点和时间刻度离得远是因为我把
第一个的高度调整成了两倍的间距,为了区分
这样我们就知道了高度和角度,我们就能通过正切求出下面的宽,
知道了宽 和 高 ,这样我们根据时间刻度的中心点(红色点)的坐标
就能知道斜线上面的蓝色点的坐标了,按照这个方法把这些点坐标都求出,然后记录下来
最后用svg连线就行了
/**
* 给定倾斜角度与临直角边的长度计算对边长度
* @param angle 角度
* @param height
*/
function computeTilt(angle, height) {
const angle2Radian = (Math.PI * angle) / 180;
return Math.round(height / Math.tan(angle2Radian));
}