0

例へのリンク: http://bl.ocks.org/mbostock/1667367

次の例を拡張して、マウスをグラフ上に移動して mousemove コールバックを登録すると、対応するデータがカーソル位置に取得されるようにしています。最良のシナリオでは、2000 年 1 月の現在の価格を、その場所にマウスを合わせると取得できます。私は次のことを試しました：

focus.append("path")
  .on('mousemove', function(d) {
      console.log(d);
  })
  .datum(data)
  .attr("clip-path", "url(#clip)")
  .attr("d", area);

しかし、そうすると、イベントがトリガーされるたびに完全なデータが得られます。私の目標を達成するためにd3.jsに実装された機能はありますか、それともイベント座標を手動で操作する必要がありますか?

前もって感謝します ：）

4

1 に答える 1

2

私はあなたがしなければならないと思うかもしれませんが、スケールではそれほど難しくありません:

focus.append("path")
  .on('click', function(d) {
    console.log(event.offsetX - margin.left);
    var date = x.invert(event.offsetX - margin.left);
    console.log(date);

    var i = 0;
    while (d[i+1].date < date){
      i++;
    }
    console.log(d[i].date);
    console.log(d[i].price);
  })


1104.49 
893 
Sun Feb 28 2010 11:11:52 GMT-0600 (Central Standard Time) 
Mon Feb 01 2010 00:00:00 GMT-0600 (Central Standard Time) 
1104.49

または、面グラフに加えて、月/価格を示すマーカーをプロットし、それぞれに onclick イベントを追加することもできます。

これを行うためのより良い方法があるかもしれません。offsetX は firefox ではファンキーです。

于 2013-05-22T17:57:36.093 に答える