5

私は D3 を初めて使用し、ここに示されているようなクリック、ドラッグ、ズームを実装したいと考えています: http://www.highcharts.com/demo/line-time-series

作成した折れ線グラフは既にありますが、これを実装する方法について混乱しています。

mousedown と mouseup が発生した場所を見つけるには、JS イベントハンドラーが必要だと思います。しかし、ユーザーがドラッグしているときにグラフに発生するシェーディングを作成するにはどうすればよいでしょうか?

4

1 に答える 1

4

brushでこれを行うには、おそらく a を使用する必要がありますd3.js。私がhttp://bl.ocks.org/1962173でまとめた例を見ることができます。これは似たようなことをします。

関連するコードは次のとおりです。

var brush = d3.svg.brush()
    .x(x)
    .extent([d3.time.monday(now),d3.time.saturday.ceil(now)])
    .on("brush", display);

wheredisplayは、 の現在の範囲に基づいてデータを再描画する関数ですbrush。この方法では、独自のハンドラーを試したりフックしたりする必要はなく、強調表示された領域のサイズ変更について心配する必要さえありません。

于 2012-07-25T04:32:35.490 に答える