1

我要求 dygraphs 在给定鼠标位置的情况下始终“锁定”到最近的 x 轴点，即使启用了“highlightSeries”，但没有“选择”系列。

目前，当启用“highlightSeries”时，dygraphs 将按欧几里得距离选择欧几里得空间中的最近点，但这通常不是我的用例的正确功能。相反，我要求它选择其中一个尺寸固定的最近点（即 x 轴），因此在确定哪个是最近点时它只能依赖 y 轴。我要求它可以与任意数量的绘制曲线一起使用。

请注意，当用户通过单击“选择”曲线时，类似的功能会被举例说明，如“突出显示最近的系列”示例 ( http://dygraphs.com/gallery/#g/highlighted-series ) 中所示。同样，当 dygraph 在未启用任何“highlightSeries”的情况下绘制曲线时，会提供正确的功能。

但是，即使有多条曲线，我也需要这种类型的功能，启用“highlightSeries”，并且用户没有特别选择一个。在这种情况下，它应该根据固定的 x 轴选择最近的曲线，但要选择最接近 y 轴的曲线。

dygraph中的最近点选择

请注意，十字准线的交叉点也是截屏时鼠标所在的位置（鼠标本身不显示）。Dygraph 选择了欧几里得空间中最近的点，该点在曲线本身上突出显示。

重申一下，不是这种行为，dygraphs 应该选择鼠标所在的 x 轴点处的曲线上的点。在这种情况下，它将是灰色垂直十字线组件切割橙色时间序列曲线的位置。

我应该如何实现这种行为？

* 编辑 *

我创建的一个（坏）解决方法如下：

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

不幸的是，由于“mousemove”的性质，这会干扰 dygraphs 原生的点击和拖动（用于缩放）突出显示交互，并且还需要更多的逻辑来阻止曲线上的圆圈过早地四舍五入并跳转到下一个数据点。肯定有更好的解决方案吗？

* 编辑 2 *

下面是一种解决方法，它通过计算出哪个系列最接近当前 Y 位置（减去 10px 偏移，对我的情况来说是唯一的），选择（锁定到）给定固定行（x 轴点）的最近曲线/系列）。此外，它不会干扰 dygraphs 原生的单击和拖动（用于缩放）突出显示交互，它提供了基本逻辑来阻止曲线上的圆圈过早四舍五入并跳转到下一个数据点（nb 使用我的用例独有的固定值或 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]);
}

有更好的解决方案吗？

4

0 回答 0