Javascript 动态图：选择最近曲线上的点w.r.t.仅y尺寸

我要求动态图始终“锁定”到给定鼠标位置的最近x轴点，即使启用了“highlightSeries”，但未“选择”任何系列

当前，当启用“highlightSeries”时，动态图形将按欧几里德距离选择欧几里德空间中最近的点，但这通常不是我的用例的正确功能。相反，我要求它选择其中一个尺寸固定的最近点，即x轴，因此在确定哪一个是最近点时，它只能依赖y轴。我需要这个函数来处理任意数量的绘制曲线

请注意，当用户通过单击曲线来“选择”曲线时，类似的功能也会出现，如“突出显示最近的系列”示例中所示。类似地，当动态图在未启用任何“highlightSeries”的情况下绘制曲线时，可提供正确的功能

但是，我需要这种类型的功能，即使有多条曲线，“highlightSeries”已启用，并且用户尚未特别选择一条曲线。在这种情况下，应基于固定的x轴选择最近的曲线，但以y轴上最近的曲线为准

请注意，十字线的交叉点也是拍摄屏幕截图时鼠标所在的位置。鼠标本身不显示。动态图选择了欧几里德空间中最近的点，该点在曲线本身上高亮显示

为了重申这一点，动态图应该在鼠标所在的x轴点选择曲线上的点，而不是此行为。在这种情况下，灰色垂直十字线组件将剪切橙色时间序列曲线

我应该如何实现这种行为

*编辑*

我创建的一个糟糕的解决方案如下：

$("#dyGraphs").mousemove(function (e){
   var parentOffset = $(this).parent().offset(); 
   var relX = e.pageX - parentOffset.left;
   g.setSelection(g.findClosestRow(relX));
}); 

不幸的是，由于“mousemove”的性质，这会干扰动态图固有的用于缩放高光交互的点击和拖动，并且还需要更多的逻辑来阻止曲线上的圆过早地向上舍入并跳到下一个数据点。肯定有更好的解决办法吗

*编辑2*

下面是一个变通方法，它通过计算出最接近当前Y位置减去10px偏移的序列，选择锁定到给定固定行x轴点的最近曲线/序列，这是我的情况所特有的。此外，它不会干扰用于缩放动态图固有的高光交互的点击和拖动，并且它提供了基本逻辑来阻止曲线上的圆过早地四舍五入并跳到下一个数据点n.b.使用固定值或我的用例特有的90px偏移

$("#dyGraphs").mousemove(function (e){
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var relX2 = relX - ( $("#dyGraphs").width() - 90 ) / g.numRows() / 2
var yOffsets = [];
var closestDistance = 999 // Arbitrary large number
var closestIdx = -1;

for (var i = 0; i < g.numColumns() - 2; i++) {
    yOffsets.push( g.toDomYCoord(g.getValue(g.findClosestRow(relX2), i+1)) )
}

$.each(yOffsets, function (i,e) {
    var difference = Math.abs(e - parseFloat(relY-10));
    if (difference  < closestDistance) {
        closestDistance = difference;
        closestIdx = i;
    }
})

if (e.which != 1 && closestIdx !== -1 ) {
    g.setSelection(g.findClosestRow(relX2), g.getLabels()[closestIdx+1]);
}

---

有更好的解决方案吗？

正如您所发现的，选择模式目前与highlightSeriesOpts混为一谈。如果您希望将此作为一个选项，请随时加入此问题：