Question

我正在尝试使用zoomCallback函数来设置我的动态图表和地图图表之间的交互。我的x值是以秒为单位的时间戳，但是由于采样率约为100Hz，因此时间戳以 float 数字存储。

目标是放大刻度图时，将使用新的x1和x2提取一条GPS轨迹（纬度，经度）。提取的轨迹将用于重新拟合地图边界-在地图上看起来像是“放大”。

在图表选项中，我指定了回调：

zoomCallback: function(x1,x2) {
  let x1Index = graphHolder.getRowForX(x1);
  let x2Index = graphHolder.getRowForX(x2);
  // further code
}

但是看起来缩放没有被“捕捉”到现有的时间戳记点，所以x1Index和x2Index都为 null 。只有当我缩小时，它们才能正确指向数据的第0行和最后一行。

问题是-是否有办法使缩放仅捕捉到最近的现有x值，以便可以返回行号？还是有其他选择可以做我想做的事？

感谢您的见解！

Answer 1

您可以通过g.getValue(row, 0)访问x轴值。由此，您可以进行线性扫描以找到范围的第一行，也可以（二进制数更高但速度更快）使用二进制搜索。

这是进行线性扫描的一种方法：

const [x1, x2] = g.xAxisRange();
let letRow = null, highRow = null;
for (let i = 0; i < g.numRows(); i++) {
    if (g.getValue(i, 0) >= x1) {
        lowRow = i;
        break;
    }
}
for (let i = g.numRows() - 1; i >= 0; i--) {
    if (g.getValue(i, 0) <= x2) {
        highRow = i;
        break;
    }
}
const dataX1 = g.getValue(lowRow, 0);
const dataX2 = g.getValue(highRow, 0);

对于较大的数据集，您可能希望使用lodash的_.sortedIndex之类的方法进行二进制搜索。

更新这是一个二进制搜索实现。无法保证边界上的确切行为（即是否总是返回可见范围内的索引或包含可见范围的索引）。

function dygraphBinarySearch(g, x) {
    let low = 0;
    let high = g.numRows() - 1;
    while (high > low) {
        let i = Math.floor(low + (high - low) / 2);
        const xi = g.getValue(i, 0);
        if (xi < x) {
            low = i + 1;
        } else if (xi > x) {
            high = i - 1;
        } else {
            return i;
        }
    }
    return low;
}
function getVisibleDataRange(g) {
    const [x1, x2] = g.xAxisRange();
    let lowI = dygraphBinarySearch(g, x1);
    let highI = dygraphBinarySearch(g, x2);
    return [lowI, highI];
}

使用zoomCallback，如何将快照“捕捉”到现有的x值？

1 个答案: