Cacher is the code snippet organizer for pro developers

d3.jsの作者であるMike Bostock自身のd3.jsのサンプルは省略できるものは省略し、繰り返さない方法があるなら繰り返さない、という傾向結構見られます

BostokのScatter Plot Matrixのサンプルコードはかなり面白くて、読んでいて作者の合理性にすごく感心するのですが、簡潔に書かれすぎていて自分には分かり難い部分がいくつか有ります。

その一つが括弧＋引数無しの関数の利用です。

例えば（エッセンスとして）だいたいこんなコードがあります。

var cell = svg.selectAll("g")
    .data(data)
  enter().append("g")
    .each(plot)

function plot(p){
  ...
}

あまり慣れない記述ですが、javascriptでは括弧＋引数無しの関数の参照は関数そのものを渡す関数ポインタのようなものとされています。 ではこのときplot(p)の引数pは何なのかというとイマイチ？？

そこで、関数ポインタであるなら.each()内に直接関数を記述するのと同じ結果が得られるはずなので例えば

var cell = svg.selectAll("g")
    .data(data)
  enter().append("g")
    .each(function(p){return console.log(p)});

と書いてみます。

この時の"p"がplot(p)の引数のはずで結局pにはdataオブジェクトが一行づつ渡されていたことがわかります。

実際アプリケーションでsvgなチャートを描画しようとするとどうしても繰り返しが多くなるので、まとめて記述できるところはまとめコンパクトにしたいと常々自分も思っているので、この書き方も大変参考になりました。