d3.jsな日々

d3.jsでデータ可視化する際の覚書です

callってどう使う?

d3.jsのAPIにcallというのがある。関数を呼び出すAPIであることはわかるのだが、具体的な使い方がいまひとつピントこなかったので、Referenceを読んでみた。Selections · mbostock/d3 Wiki · GitHub

まず具体的な例から。

function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}

という関数があるとする。普通にこの関数を使おうとすると、

foo(d3.selectAll("div"));

というように書くだろう。これはこれで間違いではない。しかし、d3.jsの表記の基本は'Chain Syntax'、つまり、'.'で樹々つなぎにするほうが「d3.js的」だ。そこで作られのが 'call'なのだ(たぶん)。

callでは普通の関数の使い方とは主客逆転する。普通は上の例のように

関数(関数に渡すもの)

と書くが、callを使う場合の書き方は

関数に渡すもの.call(関数)

となる。
ここで「関数に渡すもの」とはd3.jsではセレクションがメインとなる。
つまり、callは、セレクションを処理する関数を’Chain Syntax'に組み込むためのAPI、と考えれば良い。

なお、callはセレクション以外にも引数を渡せる。表記は、

call(関数[,引数1,引数2,引数3,....])

となる。