Binding for d3

by uedatakuya

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://raw.github.com/tenntenn/d3binding/master/d3binding.min.js"></script>
<button id="btn-up">up</button>
<button id="btn-right">right</button>
<button id="btn-down">down</button>
<button id="btn-left">left</button>
<button id="btn-color">Color Change!</button>
<button id="btn-rotate">Rotate!</button>
<svg width="500" height="500"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g id="arrow">
            <rect fill="dimgray" width="50" height="50"/>        
            <polyline fill="white" points="25,10 10,40 40,40" />
        </g>
        <use id="arrow-up" xlink:href="#arrow" transform="scale(0.4)"/>
        <use id="arrow-right" xlink:href="#arrow" transform="scale(0.4) rotate(90, 25, 25)"/>
    </defs>
    <use xlink:href="#arrow-up" />
    <use xlink:href="#arrow-right" />
</svg>

CSS

.rect {
    fill:red;
}

JavaScript

function Rect(x, y, width, height, color) {
    this.x = sb.observable(x);
    this.y = sb.observable(y);
    this.width = sb.observable(width);
    this.height = sb.observable(height);
    this.color = sb.observable(color);
    this.angle = sb.observable(0);
    this.cx = sb.observable(this.width()/2);
    this.cy = sb.observable(this.height()/2);
    sb.binding(this.x, this.y, this.width, this.height, this.cx, this.cy)
        .compute(this.cx, function() {
            return this.width()/2;
        })
        .compute(this.cy, function() {
            return this.height()/2;
        });
    this.transform = d3binding.transform()
        .translate(this.x, this.y)
        .rotate(this.angle, this.cx, this.cy);

}

var rects = [
    new Rect(100, 100, 100, 100, "red"),
    new Rect(250, 100, 100, 100, "red"),
    ];

var b = d3binding.binding().transition().attr("width", function(rect) {
    return rect.width;
}).attr("height", function(rect) {
    return rect.height;
}).style("fill", function(rect) {
    return rect.color;
}).attr("transform", function(rect) {
    return rect.transform;
});

d3.select('svg').selectAll('.rect').data(rects).enter().append('rect').call(b);

(function() {
    var step = 30;
    $('#btn-up').click(function() {
        rects[0].y(rects[0].y() - step);
    });
    $('#btn-right').click(function() {
        rects[0].x(rects[0].x() + step);
    });
    $('#btn-down').click(function() {
        rects[0].y(rects[0].y() + step);
    });
    $('#btn-left').click(function() {
        rects[0].x(rects[0].x() - step);
    });

    $('#btn-rotate').click(function() {
        rects[0].angle((rects[0].angle() + 45) % 360);
    });

})();

(function() {
    var colors = ["blue", "yellow", "green", "red"];
    var i = 0;
    $('#btn-color').click(function() {
        rects[0].color(colors[i]);
        i = (i + 1) % colors.length;
    });
})();