使用Dygraph很难指向近距离的时间序列点

Time series points in close proximity are hard to point to with Dygraph

本文关键字：距离 时间序列 Dygraph 很难 使用      更新时间：2023-09-26

我有一个数据的Dygraph散点图，其中我有紧密分组的日期时间戳的实例。 鼠标指针离 X 轴越远，突出显示这些点似乎就越困难。 可以突出显示它们，但在放大之前非常抽搐。

JSFiddle

例如，为了查看与沿 4 或 6 或 8 RPM 线的点相关联的点数据，您必须在 X 和 Y 轴上非常非常紧密地放大。 我希望我的用户能够只指向给定点来获取关联的数据，而不必每次都放大。 有没有办法减少必要的接近度或指向精度，以便从给定点获取点数据？

工作示例：使用上面列出的小提琴，当完全放大时，尝试将鼠标悬停在似乎位于以下位置的点：X: Aug 12, Y: 6（它的实际数据是：[new Date（"2012/08/02 09：49：15"）， 6.000000， 44190]，。 请注意，几乎不可能突出显示该点，因为即使光标直接位于该点上，具有较小 Y 值的时效接近点更有可能被突出显示。

看起来.findClosestPoint可能是我正在寻找的。 但是阅读最新版本中的评论，我不再那么确定：

/**
 * Given canvas X,Y coordinates, find the closest point.
 *
 * This finds the individual data point across all visible series
 * that's closest to the supplied DOM coordinates using the standard
 * Euclidean X,Y distance.
 *
 * @param {number} domX graph-relative DOM X coordinate
 * @param {number} domY graph-relative DOM Y coordinate
 * Returns: {row, seriesName, point}
 *
 @private
*/

这似乎意味着 Canvas 坐标是以编程方式提供的，而不是通过鼠标指针提供的，但这只是一个猜测。 另外，我还没有找到任何使用它的例子。 有没有办法让选择点不那么抽搐？

默认情况下，dygraphs突出显示每个序列的相应点（即出现在输入数据同一行中的点）。这通常是您想要的时间序列图，但正如您所指出的，对于散点图，其中同一序列中可能存在具有相同 x 值的多个点，它会分解。

highlightSeriesOpts 选项通常用于设置当前突出显示的序列的样式，其副作用是将选择逻辑更改为"最接近欧几里得距离"，而不是"最接近 x 值"。因此，您可以通过将此选项设置为空对象来实现所需的效果：

new Dygraph(data, div {
  highlightSeriesOpts: {}
})

这是带有修复程序的演示的更新版本：JSFiddle

相关文章：