GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。

     - D3v4, Javascript

はてなブックマーク - 【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。
Pocket

D3.jsを使ってデータビジュアライゼーションを作成するときにありがちな処理として、入力フォームの値が変更されたらチャートを再描画するというのがあります。入力フォームのchangeイベントが発火したらフォームの値を取得してredrawするわけですが、入力項目の数が増えてきたりすると管理が面倒になってきます。
できることなら、入力フォームのイベントとチャートの描画は疎結合にして、データセットが変更されたらチャートを描画するような処理にしたいところです。
ECMAScript 2015にて実装されたproxy機能を使うとオブジェクトの変更を簡単に監視することができるので、データセットの変更を監視して再描画処理を行うことができます。

※ Proxy Objectは2016/9/6現在、一部のブラウザでしか使用することができません。

Can I use Proxy Object

Can I use… Support tables for HTML5, CSS3, etc

簡単な使い方

proxyオブジェクトの機能については、MDNを参照していただくとして、最も単純なgeter,seterの監視処理を試してみます。

上記のコードは、dataオブジェクトにgeter,seterのトラップを定義したハンドラを束縛し、proxyオブジェクトを生成しています。
実際にブラウザのJavaScriptコンソール上でproxyオブジェクトを操作した結果が以下です。

proxy2016-09-06 10-20-19

proxyオブジェクトに新たなプロパティを設定するとdataオブジェクトにその内容が反映されているのが見て取れます。
同時にハンドラ内に記述されたconsole.logが実行されています。
proxyオブジェクトを使用することでオブジェクトに簡単にobserveを仕込むことができました。

D3サンプル

proxyハンドラ内にチャートを再描画する処理を挟み込み、データセットに変更があったらチャートを再描画するサンプルです。

D3 - use Proxy

bl.ocks – D3 use Proxy

はてなブックマーク - 【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。
Pocket

 - D3v4, Javascript

  関連記事

JavaScriptで距離計算など地理情報処理を行うライブラリ「Geolib」

緯度経度のデータから、2点間の距離を求めたり、中心点の算出などが行えるライブラリ …

JavaScriptの楽しい(?)ところの解説

Qiitaに「JavaScriptの楽しい(?)ところ」という記事を投稿したので …

RESAS-APIを使ってみた。

RESAS(地域経済分析システム)に掲載しているデータをプログラムから取得できる …

「SVG Crowbar」表示されているインラインSVG要素を抜き出してSVGファイルとして保存するブックマークレット

SVG Crowbar HTMLドキュメントの中に埋め込まれているSVG要素を抜 …

wakandaを使って1分でWebアドレス帳を作る

Wakanda ワカンダ ッテ ナンダ? WakandaはビジネスWebアプリケ …

no image
配列とarguments

引き続き「テスト駆動JavaScript」本を読んで勉強しているのですが、ちょっ …

rakutencardtreemap
JavaScriptでShift_JISのcsvを読み込む(文字化け対策)

楽天カードの利用明細csvを読みこんでツリーマップを表示するコードを書いてみたわ …

no image
Javascriptにもテストを。

購入。 独りでやっているとどうしてもテストなどがおろそかになりがちなので、その辺 …

Kindle Unlimited search bookmarklet
Kindle Unlimited対象商品を検索するブックマークレットを作った。

書評記事などを読んでいて、「この作品Unlimited対象になっていたりしないか …

JavaScript忍者を買った

誰かが、こう言っているのを、きっと聞いたことがあるだろう。「JavaScript …