javascript - 指定された x 座標で SVG パスに沿った点の y 座標を取得します

Question

私は raphael.js を使用して、次のような単純な SVG 折れ線グラフを描画しています。

ユーザーがグラフをホバーすると、次のように、カーソルのX位置の線と、そのX位置の線であるY位置を指すポップオーバーを表示したいと思います。

パスを取得して、特定のX座標のY座標を見つける必要があります。

Answer 1

パスのすべてのポイントがわかっている場合は、d探している特定の x 座標のパスの属性を検索し、regexp を使用して y 座標を取得する方がパフォーマンスが向上する可能性があります。

const regex = new RegExp(`${x} ((\d*.\d*))`)
const match = regex.exec(d)

パスの d 属性にない y 座標と任意の x 座標を見つけたい場合は、パスのすべての座標をループして、探している座標に最も近い x 座標を見つけることができます。パスをステップスルーして呼び出すよりも高速かどうかはわかりませんgetPointAtLength。