javascript - 检测距离鼠标指针最近且带有中断线的线

Question

我已经构建了一个包含 3 条线的 d3 折线图，并且当用户将鼠标移动到该线上时，该线已突出显示。事实证明，以这种方式选择线路非常困难。所以我尝试编写一个代码来检测最接近鼠标的线(在垂直维度上)。这工作正常:

http://plnkr.co/edit/7CD1KtqUJVnUF4KgFmUm?p=preview

我现在的问题是，如果线路在开始时被“中断”，那么这种方式就行不通。

http://plnkr.co/edit/0as4QOYVYO0dhZIjGx86?p=preview

我添加了对 line 函数的 define() 调用:

var line0 = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);});
var line1 = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);})
    .defined(function (d,i) {return i > 1;});   // <- Here ...
var line2 = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);})
    .defined(function (d,i) {return i > 3;});   // <- and here.

同样的问题，如果行以不同的 x 值开头，我在这里模拟的有点黑客:

http://plnkr.co/edit/hOtXOmQapYsuYgf9HkD3?p=preview

我正在显示连接测量值的线路，如果缺少测量值，线路就会中断。所以这些干扰可能无处不在。你知道这个问题的解决办法吗？

Answer 1

我建议您绘制几对线，第一条是您现在正在绘制的线，但带有指针事件:无，然后第二条(具有相同的坐标)将是可见性:隐藏，但带有笔划和合理的笔划宽度，以便于选择。

当用户将鼠标悬停在隐藏线上时，您可以对其进行处理，就像将鼠标悬停在可见线上一样。