Binding for d3

by uedatakuya

HTML

<script src="http://d3js.org/d3.v2.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>
<svg>
</svg>

CSS

rect {
    fill:red;
}

JavaScript

// -- please read this part later
// observable value


function observable(init) {
    var value = init;
    var callbacks = [];
    var i;

    var property = function(v) {

        // setter
        if (typeof v !== "undefined") {
            value = v;

            // notify to observers
            for (i = 0; i < callbacks.length; i++) {
                if (typeof callbacks[i] === "function") {
                    (callbacks[i])(this);
                }
            }
        }

        // getter
        return value;
    };

    // add observer
    property.bind = function(callback) {
        callbacks.push(callback);
    };

    // for detection of type
    property.prototype = observable;
    return property;
}

// create expandable functions


function expandable(fnc) {

    if (typeof fnc !== "function") {
        fnc = function() {};
    }

    // created function
    var that = function() {
        fnc.apply(that, arguments);
    };

    // expand function
    that.expand = function(newFunc) {
        var f = fnc;
        fnc = function() {
            f.apply(that, arguments);
            newFunc.apply(that, arguments);
        };

        return that;
    };

    return that;
}

// binding behavior for d3


function binding() {

    var that = expandable(function(selection) {});
    that.isTransition = false;

    that.transition = function() {
        if (!that.isTransition) {
            var newThat = expandable(that);
            for (key in that) {
                if (that.hasOwnProperty(key)) {
                    newThat[key] = that[key];
                }
            }
            newThat.isTransition = true;
            return newThat;
        }

        return that;
    };

    var common = function(that, name, value, funcname) {
        that.expand(function(selection) {
            selection.attr(name, function(d) {
                var s = d3.select(this);
                var v = value;
                if (typeof v === "function") {
      ...