Chart Sample with d3js

by uedatakuya

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<!-- 順番が重要 -->
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://raw.github.com/tenntenn/simple-binding.js/master/dist/simple-binding.min.js"></script>
<script src="https://raw.github.com/tenntenn/d3binding/master/dist/d3binding.min.js"></script>

<button id="add-btn">Add</button>
<div id="chart">
    
</div>

CSS

#chart div {
   background-color: steelblue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
}

JavaScript

var data = [
    sb.observable(10),
    sb.observable(20),
    sb.observable(30),
    sb.observable(40)
];

// Create binding
var b = sb.d3.binding().transition()
.style("width", function(d) {
    var width = sb.observable(d() * 10 + "px");
    sb.binding(d).computed(width, function(){
        return d() * 10 + "px";
    }).bind();

    return width;
})
.text(function(d){
    return d;
});

var chart = d3.select('#chart');
chart.selectAll("div").data(data).enter().append("div").call(b);

// Click add button
$('#add-btn').click(function(){
    data.forEach(function(d) {
        d(d() + 1);
    });
});