【D3.js】作っておくと便利な関数達

ショートカット

D3はどうしても無名関数を多用することになるので、ショートカットを作っておくと便利です。

function D(params){
    return function(d, i){
        if(typeof params ==='function') { return params(d) }
        else if( typeof params ==='string'){ return (new Function( 'return (' + d + params + ')' )()) }
        else { return d};
    }
}

function I(params){
    return function(d, i){
        if(typeof params ==='function') { return params(i) }
        else if( typeof params ==='string'){ return (new Function( 'return (' + i + params + ')' )()) }
        else { return i};
    }
}

function F(name){
  var params=Array.prototype.slice.call(arguments,1);  
    return function(d){
        if(typeof params[0] ==='function') { return params[0](d[name]) }
        else if( typeof params[0] ==='string'){ return (new Function( 'return (' + d[name] + params[0] + ')' )()) }
        else if( typeof name === 'object' ){ return name }
        else { return d[name]};
    }
}

function D(params){

return function(d, i){

if(typeof params ==='function') { return params(d) }

else if( typeof params ==='string'){ return (new Function( 'return (' + d + params + ')' )()) }

else { return d};

}

function I(params){

return function(d, i){

if(typeof params ==='function') { return params(i) }

else if( typeof params ==='string'){ return (new Function( 'return (' + i + params + ')' )()) }

else { return i};

}

function F(name){

var params=Array.prototype.slice.call(arguments,1);

return function(d){

if(typeof params[0] ==='function') { return params[0](d[name]) }

else if( typeof params[0] ==='string'){ return (new Function( 'return (' + d[name] + params[0] + ')' )()) }

else if( typeof name === 'object' ){ return name }

else { return d[name]};

}

使い方

var data1 = [10, 20 30];

//before 

d3.selectAll('rect')
  .data(data1)
  .enter()
  .append('rect')
  .attr({
     x:function(d){ return d },
     y:function(d){ return d * 10 + 100 }
  });

// after 

d3.selectAll('rect')
  .data(data1)
  .enter()
  .append('rect')
  .attr({
     x:D(),
     y:D('* 10 + 100')
  });

// other

var data2 = [{x:10, y:20, color:10}, {x:10, y:20, color:20}, {x:10, y:20, color:30}}
var colorScale = d3.scale.category20();

d3.selectAll('circle')
  .data(data1)
  .enter()
  .append('circle')
  .attr({
     r:I(),
     x:F('X'),
     y:F('y', '* 10 + 100'),
     color:F('color', colorScale),
  });

var data1 = [10, 20 30];

//before

d3.selectAll('rect')

.data(data1)

.enter()

.append('rect')

.attr({

x:function(d){ return d },

y:function(d){ return d * 10 + 100 }

});

// after

d3.selectAll('rect')

.data(data1)

.enter()

.append('rect')

.attr({

x:D(),

y:D('* 10 + 100')

});

// other

var data2 = [{x:10, y:20, color:10}, {x:10, y:20, color:20}, {x:10, y:20, color:30}}

var colorScale = d3.scale.category20();

d3.selectAll('circle')

.data(data1)

.enter()

.append('circle')

.attr({

r:I(),

x:F('X'),

y:F('y', '* 10 + 100'),

color:F('color', colorScale),

});

部分適用、ランダム、データ生成

curryは厳密にはカリー化ではなく部分適用かもしれませんが、覚えやすいのでこの名前を使ってます。

if (!Function.prototype.curry){
    (function(){
	var slice = Array.prototype.slice;
	
	Function.prototype.curry = function(){
	    var target = this;
	    var args = slice.call(arguments);
	    
	    return function(){
		var allArgs = args;
		if (arguments.length &gt; 0){
		    allArgs = args.concat(slice.call(arguments));
		}
		return target.apply(this, allArgs);
	    };
	};
    }());
}

function R(s){ return Math.floor(Math.random() * s) }; 

function createData(obj, length){
    var data = [];
    for(var i=0; i < length; i++){
        if(typeof obj === 'function'){ data.push(obj())} 
        else{data.push(obj)};   
    }
    return data;
}

if (!Function.prototype.curry){

(function(){

var slice = Array.prototype.slice;

Function.prototype.curry = function(){

var target = this;

var args = slice.call(arguments);

return function(){

var allArgs = args;

if (arguments.length > 0){

allArgs = args.concat(slice.call(arguments));

}

return target.apply(this, allArgs);

};

}());

}

function R(s){ return Math.floor(Math.random() * s) };

function createData(obj, length){

var data = [];

for(var i=0; i < length; i++){

if(typeof obj === 'function'){ data.push(obj())}

else{data.push(obj)};

}

return data;

}

使い方

var rmdObj = function() { return {x:R(100), y:R(100)} };
var data = createData.curry(rmdObj);
data(4) // -> [{"x":93,"y":57},{"x":10,"y":26},{"x":26,"y":46},{"x":5,"y":50}]
data(4) // -> [{"x":17,"y":38},{"x":88,"y":77},{"x":48,"y":92},{"x":71,"y":26}]"

var rmdObj = function() { return {x:R(100), y:R(100)} };

var data = createData.curry(rmdObj);

data(4) // -> [{"x":93,"y":57},{"x":10,"y":26},{"x":26,"y":46},{"x":5,"y":50}]

data(4) // -> [{"x":17,"y":38},{"x":88,"y":77},{"x":48,"y":92},{"x":71,"y":26}]"

ランダムなデータを生成したいときに便利

トグル

トグルにしたい関数を二つ渡します。

function toggle(){
    var fn = arguments;
    var l = arguments.length;
    var i = 0;
    return function(){
        if(l <= i) i=0;
        fn[i++]();            
    }
}

function toggle(){

var fn = arguments;

var l = arguments.length;

var i = 0;

return function(){

if(l <= i) i=0;

fn[i++]();

}

使い方

    function a1(){
          alert('Hello');  
    }
    function a2(){
        alert('world');    
    }
setInterval(toggle(a1, a2), 1000)

function a1(){

alert('Hello');

}

function a2(){

alert('world');

}

setInterval(toggle(a1, a2), 1000)

D3 Helper Function

jsdo.itで試せます。

【D3.js】作っておくと便利な関数達

ショートカット

部分適用、ランダム、データ生成

トグル

D3 Helper Function

D3utilityを使ったサンプル

投稿者: shimizu