我有一个数据的 Dygraph 散点图,其中我绘制了紧密分组的日期时间戳的实例。鼠标指针离 X 轴越远,就越难突出显示这些点。可以突出显示它们,但是在非常紧密地放大之前它会非常紧张。
例如,为了查看与沿 4 或 6 或 8 RPM 线的点相关联的点数据,您必须在 X 轴和 Y 轴上非常非常紧密地放大。我希望我的用户能够仅指向给定点以获取关联数据,而不必每次都放大。有什么方法可以减少必要的接近度,或者减少从给定点获取点数据的指向精度?
工作示例:
使用上面列出的 fiddle ,当一直缩小时,尝试将鼠标悬停在出现的位置:X: Aug 12, Y: 6
(它的实际数据是:[ new Date("2012/08/02 09:49:15"), 6.000000, 44190],。请注意,几乎不可能突出显示该点,因为时间上接近且 Y 值较小的点要多得多可能会突出显示,即使您将光标直接放在该点上也是如此。
它看起来像 .findClosestPoint可能是我要找的。但是阅读 comments in the latest build对于它我不再那么确定:
/**
* 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
关于javascript - 使用 Dygraph 很难指向非常接近的时间序列点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26981304/