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
-,

執筆者:

関連記事

d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

目次1 基本になるrectを追加2 角丸3 半透明4 グラデーション5 ドロップシャドウ6 ライティング7 html要素を追加する~foreignObject 基本になるrectを追加 SVG 1.1 …

Tree図をいろいろ試してみる~d3.js

  前提 Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize これで取得してきたJSONを使っていろいろ試してみた と言っても、まだ指定のJSONを置き換えただ …

気になるD3.jsサンプル

Hierarchical Bars バーをクリックするとその内訳がまたバーチャートになる         Collapsible Indented Tree 開閉できる階 …

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

d3.jsのグラフにマウスオーバーでツールチップをつける

決め打ちで スタイルでフォントサイズを指定した ツールチップがはみ出す場合の条件と処理を追加