「highlightSeries」が有効になっていても、シリーズが「選択」されていない場合でも、マウスの位置を指定して、常に最も近い x 軸ポイントに dygraph を「ロックオン」する必要があります。
現在、「highlightSeries」が有効になっている場合、ダイグラフはユークリッド距離によってユークリッド空間で最も近い点を選択しますが、これは通常、私のユースケースでは正しい機能ではありません。代わりに、寸法の 1 つ (x 軸) が固定されている最も近い点を選択する必要があるため、どの点が最も近いかを判断するときに y 軸にのみ依存できます。これは、任意の数のプロットされた曲線で機能する必要があります。
同様の機能は、ユーザーが曲線をクリックして曲線を「選択」したときに例示されることに注意してください。これは、「最も近いシリーズを強調表示」の例 ( http://dygraphs.com/gallery/#g/highlighted-series ) で示されています。同様に、dygraph が「highlightSeries」を有効にせずに曲線をプロットする場合、正しい機能が提供されます。
ただし、複数の曲線があり、「highlightSeries」が有効になっていて、ユーザーが特定の曲線を選択していない場合でも、このタイプの機能が必要です。この場合、固定された x 軸に基づいて最も近い曲線を選択する必要がありますが、y 軸で最も近い曲線が選択されます。
十字線の交点は、スクリーンショットを撮ったときにマウスがあった場所でもあることに注意してください (マウス自体は表示されません)。Dygraph はユークリッド空間で最も近い点を選択しており、曲線自体で強調表示されています。
繰り返しますが、この動作の代わりに、dygraph はマウスが配置されている x 軸の点で曲線上の点を選択する必要があります。この場合、灰色の垂直十字線コンポーネントがオレンジ色の時系列曲線を切断する場所になります。
この種の動作を実現するにはどうすればよいですか?
* 編集 *
私が作成した 1 つの (悪い) 回避策は次のとおりです。
$("#dyGraphs").mousemove(function (e){
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
g.setSelection(g.findClosestRow(relX));
});
残念ながら、「mousemove」の性質上、これは dygraph 固有のクリック アンド ドラッグ (ズーム用) のハイライト インタラクションを妨げます。また、曲線上の円がすぐに切り上げられて次のデータポイント。確かに、より良い解決策が必要ですか？
*編集2 *
以下は、固定行 (x 軸ポイント) を指定して、最も近い曲線/シリーズを選択 (ロックオン) する回避策です。どのシリーズが現在の Y 位置 (マイナス 10px オフセット、私の状況に固有) に最も近いかを調べることによって）。また、ダイグラフ固有のクリック アンド ドラッグ (ズーム用) のハイライト インタラクションに干渉せず、曲線上の円がすぐに切り上げられて次のデータ ポイントにジャンプするのを防ぐための基本的なロジックを提供します (nb using固定値または私のユース ケースに固有の 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]);
}
より良い解決策はありますか？