Javascript 行拖动事件后更新多行图的域值

我正在开发一个具有双时间轴和缩放/拖动功能的简单多线图。请看一下我的表

我试图在折线图上实现拖动功能，因此拖动特定的线将导致其相应的轴也得到更新。每次对图形应用拖动时，我都会尝试更新其各自轴的域值，并重新绘制轴和线图形

以下是我为更新域值（从a引用）而实现的逻辑：

---

当我实现这个逻辑时，我得到一个NaN错误。这是拖动后更新域值的正确方法吗？如果是这样，我如何解决NaN错误并实现所需的功能？

将数字转换为日期对象很重要，因为您的代码中有输入错误（data1[0].time而不是data1[0].date）。此外，您不应该乘以1000，因为您的数据已经以毫秒为单位。 在拖动代码中，将日期对象转换回数字也很重要，以便+=可以处理它们。当然，在再次设置域时，您还需要将它们转换回最新版本

function draggedData1(d) {
    console.log("dragging of data1 going on!!")

    var mousePoint = d3.mouse(this);
    var x1 = x1Scale.domain()[0].valueOf(); //date to number
    var x2 = x1Scale.domain()[1].valueOf();
    var xextent = x1 - x2;

    x1 += mousePoint[0];
    x2 += mousePoint[0];
    var newDomain = [new Date(x1), new Date(x2)]; //number back to date
    x1Scale.domain(newDomain);
    redraw();
    zoomBottom.x(x1Scale);
    zoom.x(x2Scale);
}

我在这里创建了一个完整的代码和修复程序：

function draggedData1(d) {
    console.log("dragging of data1 going on!!")

    var mousePoint = d3.mouse(this);
    var x1 = x1Scale.domain()[0].valueOf(); //date to number
    var x2 = x1Scale.domain()[1].valueOf();
    var xextent = x1 - x2;

    x1 += mousePoint[0];
    x2 += mousePoint[0];
    var newDomain = [new Date(x1), new Date(x2)]; //number back to date
    x1Scale.domain(newDomain);
    redraw();
    zoomBottom.x(x1Scale);
    zoom.x(x2Scale);
}