8

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);
});

ただし、いくつかの問題があります。

  1. SVG 要素の上にマウスを置いたときに、mouseoverandmousemoveイベントが一貫して発生しないようです。
  2. によって提供された値と値を日付とx値に変換して、グラフに目的の円を描画し、目的のポップアップを表示する方法がわかりません。yd3.mouse(this)inlet

どんな助けでも大歓迎です。

更新: @Aegis の助けを借りて、1 と 2 の一部を解決しました: http://jsfiddle.net/BvuBV/4/

しかし、ホバー ラインと 2 つのチャート ラインの交点を強調表示する方法と、その時点でのチャート ラインの値を取得する方法はまだわかりません。

4

2 に答える 2

13

これはすでに回答済みとしてマークされていることは知っていますが、これが上位の結果として表示される将来のグーグルユーザーのために...ウィルターマン/4631136

垂直線のコードの関連部分は次のとおりです。

  var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .style("bottom", "30px")
        .style("left", "0px")
        .style("background", "#fff");

  d3.select(".chart")
      .on("mousemove", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px" )})
      .on("mouseover", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});
于 2014-04-07T20:16:52.877 に答える
5

これは、もう少し先に進むのに役立つかもしれません (私は D3 の経験がまったくありません):

  1. 何らかの理由で、イベントは基本の svg 要素ではなく、パスにバインドされています。実行するd3.select(".air-quality").on(..)と、期待どおりに動作するようです。
于 2013-09-18T21:53:05.600 に答える