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

Updating domain values of multiline graph after line drag event

本文关键字：更新 拖动 事件      更新时间：2023-09-26

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

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

以下是我实现的更新域值的逻辑（参考D3示例）：

 var mousePoint = d3.mouse(this);
     x1 = x1Scale.domain()[0],
     x2 = x1Scale.domain()[1],
 console.log("x1 = "+x1+", x2 = " +x2);
     xextent = x1 - x2;
     x1 += mousePoint[0];
     x2 += mousePoint[0]; 
 var newDomain = [x1, x2];
     x1Scale.domain(newDomain);

当我实现这个逻辑时，我会得到一个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);
}

我在这里创建了一个完整的代码和修复程序：http://jsfiddle.net/pb3cod6q/2/

相关文章：