d3.jsを使って選択された範囲のグラフを表示させる 使用するデータは乱数で生成した株価っぽいやつ。特に意味はない。 ソースコード デモページ svg領域への出力範囲(値域)は変えず、入力範囲(定義域)を変化させることで、グラフの拡大縮小・移動を行う。 処理フロー 範囲選択を始める 選択範囲から逆算して、元のサイズでの選択された範囲(\$1)を求める \$1を入力範囲として、スケール変換用の関数(\$2)を生成する \$2でデータを変換し、プロットする グラフの描画 グラフ描画はいいって人は範囲選択へ データ変換(スケール変換関数) d3.scaleLinear()はデータの入力範囲と出力範囲を決めるだけで線形変換を行う関数(一次関数)を作成してくれる。 domain()が入力範囲でrange()が出力範囲。 中学数学に即して言えば、domainがxの変域、rangeがyの変域。 でも入力
![選択された範囲のグラフを表示する (d3.js v5 brush) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/84c5b5beaea6ece7208a238eb8dae8593929f0d3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU5JTgxJUI4JUU2JThBJTlFJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJTlGJUU3JUFGJTg0JUU1JTlCJUIyJUUzJTgxJUFFJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJTk1JUUzJTgyJTkyJUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJTk5JUUzJTgyJThCJTIwJUVGJUJDJTg4ZDMuanMlMjB2NSUyMGJydXNoJUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kZmYwMDVlZWU4NTY2Mjc0YTEzMjhhMTQ2YTk4MTg2OA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwS2V5aG9oJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03ZTM4ZTczNGM0NjJkN2E5YmNiY2FmZmFjMGFkM2I3ZQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D81d07f73a980967b1d4cfd31ac98e311)