const widthFun = function (endTime, startTime, maxTime, minTime) {
const task_width =
(((Number (endTime) - Number (startTime)) /
((maxTime || time[time.length - 1]) - (minTime || time[0])) *
(body_width - tree_box_dom.offsetWidth)) / dom.offsetWidth)*100;
return task_width> 100 ? 100 : task_width;
};
鼠标缩放，保持以鼠标为中心，往两边放大
先放推理过程图：
// 上图解释
// dom = 时序图的dom元素
// domL1, domeL2 = dom.scrollLeft;
// domeL1表示前一次的dom.scrollLeft;
// domeL2表示当前的dom.scrollLeft;
// scale 表示当前的放大的比例
// scale1 表示上一次的放大比例
// tree_dom.offsetWidth表示左侧树的宽度
// clientX1 表示上一次的鼠标位置距离时序图左侧的距离 = e.clientX - tree_dom.offsetWidth
// clientX2 表示当前鼠标位置距离时序图的距离// 以鼠标为中心的缩放，公式为：
domL2 = domeL1(scale/scale1) + clientX1(scale/scale1) - e.clientX + tree_dom.offsetWidth
// 公式讲解：
// 1. scale/scale1表示本次的缩放比例除以上一次的缩放比例，表示当前的缩放比例
// 左侧卷去的宽度在第二次缩放时也会跟着缩放，所以左侧的宽度需要乘以缩放比例
// 鼠标位置距离时序图左侧的宽度在缩放时也会跟着缩放，所以也要乘以缩放比例
// 最后面减去鼠标位置距离时序图左侧的实际距离就等于缩放时左侧卷去的长度
// 页面代码
time_box_parent.scrollLeft = (time_box_parent.scrollLeft + e.clientX - tree_box_dom.offsetWidth) * (scale_x / scale_x1) - e.clientX + tree_box_dom.offsetWidth;
使用连线表示任务之间的关系
方案：
采用的时css3 + js + html5,用伪元素绘制。
用dom包裹直角图片，设置其位置及高度。
用标签绘制
优缺点：
优点：不会增加多余的标签，对渲染有利。缺点：父任务产生了多个子任务，不好添加伪类及设置伪类的高度及宽度。
优点：方便，只要计算子任务距父任务的高度即可。缺点：任务过多时图片会非常多，很影响性能
优点：单独控制每个元素的高度及位置，可控性高，可添加反馈色。缺点：添加了较多的元素，对渲染产生影响（本人使用的是第三种，这是一个笨方法，有更好方法的大佬，可以提供建议，多谢）
实现思路：
用一个变量记录每个任务的层级深度，层级深都以当前任务的父任务为起点，就是说是从哪个任务产生的当前任务，同级的子任务进行累加操作。用累加的变量按照一定的比例获取垂直连线的高度以及水平连线的top值，水平连线的长度由任务的创建时间和开始时间决定。（使用上面的宽度百分比函数）
