Question

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

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

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

 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错误并实现所需的功能？

Answer 1

将数字转换为日期对象很重要，代码中存在拼写错误（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/

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

1 个答案: