D3.jsで折れ線グラフを作成しています。ユーザーがグラフの上にマウスを置いたときに、グラフに垂直線を描画し、グラフの線との交点を強調表示して、次のスクリーンショットのようにツールヒントを表示したいと思います。
私はこの道の途中まで来ました。これがJSFiddleの私のコードです: http://jsfiddle.net/BvuBV/1/
ご覧のとおり、svg
要素でマウス イベントをリッスンしており、行は (ある程度) 正しく表示されています。
// Add mouseover events.
svg.on("mouseover", function() {
console.log('mouseover')
}).on("mousemove", function() {
console.log('mousemove', d3.mouse(this));
var x = d3.mouse(this)[0];
hoverLine.attr("x1", x).attr("x2", x).style("opacity", 1);
}).on("mouseout", function() {
console.log('mouseout');
hoverLine.style("opacity", 1e-6);
});
ただし、いくつかの問題があります。
- SVG 要素の上にマウスを置いたときに、
mouseover
andmousemove
イベントが一貫して発生しないようです。 - によって提供された値と値を日付と
x
値に変換して、グラフに目的の円を描画し、目的のポップアップを表示する方法がわかりません。y
d3.mouse(this)
inlet
どんな助けでも大歓迎です。
更新: @Aegis の助けを借りて、1 と 2 の一部を解決しました: http://jsfiddle.net/BvuBV/4/
しかし、ホバー ラインと 2 つのチャート ラインの交点を強調表示する方法と、その時点でのチャート ラインの値を取得する方法はまだわかりません。