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

2016/09/06 - D3v4, Javascript

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

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

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

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

簡単な使い方

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

//データセット
var data = {}

//proxyに設定するハンドラ
var proxyHandler = {
    get: function(target, prop, value){
        console.log("get!", target)
       return target[prop]
    },
    set: function(target, prop, value){
        console.log("set!", target)
        target[prop] = value
    }
}

//データセットを束縛したプロキシオブジェクトを生成
var proxy = new Proxy(data, proxyHandler)

//データセット

var data = {}

//proxyに設定するハンドラ

var proxyHandler = {

get: function(target, prop, value){

console.log("get!", target)

return target[prop]

set: function(target, prop, value){

console.log("set!", target)

target[prop] = value

}

//データセットを束縛したプロキシオブジェクトを生成

var proxy = new Proxy(data, proxyHandler)

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

proxy2016-09-06 10-20-19

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

D3サンプル

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

bl.ocks – D3 use Proxy

!(function(){
    "use strict";
    
    const dataSet = [
        {name:"tokyo", value:"100"},
        {name:"gunma", value:"200"},
        {name:"saitama", value:"300"}
    ]
    
    //バーチャートモジュールを生成
    const BarChart = createVBarChart()
        .margin({top:40, left:100, bottom:40, right:10})
        .x(function(d){ return d["name"] })
        .y(function(d){ return d["value"] })
    
    //チャートを描画する
    const selector =  d3.selectAll("#chart").datum(dataSet)
        .call(BarChart)
        
    //データセットの内容が変更されたらチャートをアップデートする    
    const proxyHandler = {
        get: function(target, name, value){
           return target[name]
        },
        set: function(target, name, value){
            if (name == "value" && isNaN(+value)) throw new TypeError("型がちがうよ")
            target[name] = value
            selector.update(dataSet) //チャートアップデート
        }
    }
    
    //データセットをネストし、proxyで包む
    const nested = d3.nest()
        .rollup(function(d){ return new Proxy(d[0], proxyHandler) })
        .key(function(d){ return d.name })
        .map(dataSet)
    
    
    //テキストボックスの値が変更されたらデータセットをporxy経由で変更する    
    const  updateDataset = function() {
        nested["$"+this.name].value = this.value    
    }
    
    const textBox = d3.selectAll(".input")
        .on("change", updateDataset)    
    
    //テキストボックスに初期値を渡す。    
    textBox.each(function(){
            this.value = nested["$"+this.name].value
        })

}());

!(function(){

"use strict";

const dataSet = [

{name:"tokyo", value:"100"},

{name:"gunma", value:"200"},

{name:"saitama", value:"300"}

]

//バーチャートモジュールを生成

const BarChart = createVBarChart()

.margin({top:40, left:100, bottom:40, right:10})

.x(function(d){ return d["name"] })

.y(function(d){ return d["value"] })

//チャートを描画する

const selector = d3.selectAll("#chart").datum(dataSet)

.call(BarChart)

//データセットの内容が変更されたらチャートをアップデートする

const proxyHandler = {

get: function(target, name, value){

return target[name]

set: function(target, name, value){

if (name == "value" && isNaN(+value)) throw new TypeError("型がちがうよ")

target[name] = value

selector.update(dataSet) //チャートアップデート

}

//データセットをネストし、proxyで包む

const nested = d3.nest()

.rollup(function(d){ return new Proxy(d[0], proxyHandler) })

.key(function(d){ return d.name })

.map(dataSet)

//テキストボックスの値が変更されたらデータセットをporxy経由で変更する

const updateDataset = function() {

nested["$"+this.name].value = this.value

}

const textBox = d3.selectAll(".input")

.on("change", updateDataset)

//テキストボックスに初期値を渡す。

textBox.each(function(){

this.value = nested["$"+this.name].value

})

}());

Pocket

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

簡単な使い方

D3サンプル

関連

関連記事

配列とarguments

iphoneに搭載されているセンサー(GPS位置情報、ジャイロセンサー、電子コンパス、加速度センサー)の情報を取得

documentオブジェクトの拡張

[Autocomplete] かな入力で名前（漢字）を絞り込むセレクトボックス

エンジニアが正しく「I love you」と伝えるための遺伝的アルゴリズム(殺伐)

Gunma.web #14で発表したスライド「canvasで遊ぼう！」

JavaScriptのWith文を使っちゃいけない訳

【英語】Kindleで買えるお勧めHTML5 Canvas技術書【読めない】

JavaScript Ninjaは全てのフロントエンドエンジニアが一度は読んでおくべき本

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