D3.js

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

投稿日:

参考(というかほぼそのまま)

【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush)

コントロール用のグラフ領域を作成する

このとき、便宜上、上をfocus、下をcontentとかのgに入れておくとはかどる

また、上のグラフは再描画するので関数にしておく(ツールチップなんかも一緒に)

screenshot

brushを宣言する

 

選択領域用のrectを作成する

content領域にbrushクラスのついたグループを追加して、rectを追加

screenshot

コールバックには、brush.extent()でxの最大値・最小値が返ってくる

 

コールバックを書く

コールバックでforcusのscaleを書きなおして再描画

screenshot

-D3.js
-,

執筆者:

関連記事

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

no image

D3.jsのBarChartをCoffeeScriptでクラス化(仮)

    グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

no image

d3.jsでグラフ描画するときの枠組み作成のメモ

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

参考 D3をはじめよう 参考 Force Layout 目次1 forceレイアウトのスケルトン2 zoom&pan forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用し …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …