Old school D3 from simpler times

All examples By author By category About

shimizu

Full window Github gist

D3 - use Proxy

proxyを使用しているため、対応しているブラウザ以外では動作しません。

Proxy - JavaScript | MDN

○ Charome, FIrefox

× IE, Safari

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 - use Proxy</title>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin:  0px;
}
#chart {
    width: 900px;
    height: 450px;
}
.vbarChart .bar {
    fill:blue;
}
/* axis */
.vbarChart .axis {
}
.vbarChart .axis .domain {
	stroke: #333333;
}
.vbarChart .tick line {
	stroke: #333333;
	stroke-width: 1px;
}
.vbarChart .tick text {
	fill: #333333;
	font-size: 14px;
	letter-spacing: .05em;
}
/* grid */
.vbarChart .grid line {
	stroke: #cccccc;
	stroke-dasharray: 3,3;
}
/* label */
.vbarChart .label {
	font-size: 12px;
	font-weight: normal;
	letter-spacing: .05em;
}

#form {
    margin: 10px;
}
</style>
</head>

<body>
<div id="form">
    tokyo:<input class="input" type="number" name="tokyo">
    gunma:<input class="input" type="number" name="gunma">
    saitama:<input class="input" type="number" name="saitama">
</div>
<div id="chart"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>

<script src="createVBarChart.js"></script>
<script>
!(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) //チャートアップデート
            return target[name]
        }
    }
    
    //データセットをネストし、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
        })

}());

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js