d3.csvやd3.jsonを使った非同期のデータ読み込み処理をまとめる

参照
http://shimz.me/blog/d3-js/3087

追記：少し改良しました。
http://shimz.me/blog/javascript/3376

d3.json('test.json', function(json){
    d3.csv('test1.csv', function(csv1){
        d3.csv('test2.csv', function(csv2){
            d3.csv('test3.csv', function(csv3){
                d3main(json, csv1, csv2, csv3);
            });
        });        
    });
});

function d3main(){
    var data = Array.prototype.slice.call(arguments);
}

上記のようなデータ読み込み時の非同期処理をまとめる。

function loadDataSet(){
    var urlArray = arguments[0] ;
    var callback = arguments[arguments.length-1]
    if(!Array.isArray(urlArray)) throw 'TypeError: arg1 is not a array!';
    if(typeof callback != "function")  throw 'TypeError: callback is not a function!';
    if(arguments.length > 2){
        var workinFnArray = Array.prototype.slice.apply(arguments, [1, arguments.length-1]);
    }

    var dataStack = [];
    var fnStack = [];

    var chain = function(functions) {
      return functions.reduceRight(function (next, curr) {
        return function () {
            if(workinFnArray) workinFnArray.forEach(function(fn){ fn(); });
          curr.apply({next: next}, arguments);
        }
      });
    }

    urlArray.forEach(function(url){
        fnStack.push(
            function() {
                var that = this;
                var exte = url.split('.')[url.split('.').length-1];
                var readfile;
                switch(exte){
                    case 'json': case 'geojson': case 'topojson':
                        readfile = d3.json;
                    break;
                    case 'csv':
                        readfile = d3.csv;
                    break;
                    default:
                        throw 'TypeError: ' + exte + ' is not supported';
                    break;                        
                }

                return readfile(url,  function(data){
                    dataStack.push(data);
                    that.next();
                });
            }
        )
    });

    fnStack.push(function(){    
        callback(dataStack);
    });
    chain(fnStack)(); 

}

実際に読み込んでみる

loadDataSet(
    ['test.json','test1.csv', 'test2.csv', 'test3.csv'],
    d3main
);

function d3main(data){
    console.log(data);
}

データセットのロード中に「Now Loading…」とか挟みむ場合

loadDataSet(
    ['test.json','test1.csv', 'test2.csv', 'test3.csv'],
    function(){
        document.getElementById('info').innerHTML = 'Now Loading……';
    },
    function(data){
        document.getElementById('info').innerHTML = 'Success!';
        d3main(data);
    }
)

function d3main(data){
    document.getElementById('outputData').innerHTML = JSON.stringify(data);
}