利用svg结合html实现时间轴上下斜着展示子节点的鱼骨图

主要利用基于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));
}