JavaScript调用arr.push后数组元素位置异常 D3.js甘特图重绘问题排查

核心问题出在initTimeDomain函数对数组的处理逻辑：

• JS中数组是引用类型，代码中var tasksOrder = tasks;只是将原tasks数组的引用赋值给tasksOrder变量，并没有生成新的独立数组。
• 后续调用的sort()是JS内置的原地排序方法，会直接修改操作数组的元素顺序，也就相当于直接修改了你外部传入的原tasks数组。当新增任务的startDate小于已有任务时，排序后新任务就会被移动到数组前列，和你push后预期的顺序不符。

修改initTimeDomain函数的数组赋值逻辑，先对传入的tasks做浅拷贝再执行排序，避免修改原数组的顺序：
修改前代码：

var tasksOrder = tasks;

修改后代码：

// 浅拷贝数组，后续排序仅作用于拷贝后的新数组
var tasksOrder = [...tasks];
// 也可以用 var tasksOrder = tasks.slice(); 实现相同效果

当前gantt.redraw方法每次执行都会新建一个tooltip节点，多次调用后页面会产生大量冗余的tooltip DOM元素，建议把tooltip的初始化逻辑移到redraw函数外部，全局只创建一次tooltip节点，仅在鼠标事件中修改其内容和位置即可。

内容的提问来源于stack exchange，提问作者testerprox