JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<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="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">
</svg>

JavaScript

var rects = [
    new sb.d3.shape.Rect(100, 100, 100, 100),
    new sb.d3.shape.Rect(250, 100, 100, 100),
];

var b = sb.d3.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;
    });
})();