D3js中each与call使用区别

在对选集中的对象进行操作的时候，each和call都可以使用，通过如下代码具体分析他们使用的区别：

<span id="eachSelect">
    <div></div>
    <div></div>
    <div></div>
</span>
<span id="callSelect">
    <div></div>
    <div></div>
    <div></div>
</span>
<script type="text/javascript">
    // 1-code
    d3.select("#eachSelect").selectAll("div")
            .attr("class", "red box")
            .each(function (d, i) {
                d3.select(this).append("h1").text(i);
            });
    // 2-code
    d3.select("#callSelect").selectAll("div")
            .attr("class", "blue box")
            .call(function (d, i) {
                d.append("h1").text(i);
                //this.append("h1").text(i);
            }, "1");
    // 3-code
    /*
    d3.select("#callSelect").selectAll("div")
            .attr("class", "blue box")
            .call(function (d) {
                d.each(function(d, i){
                    d3.select(this).append("h1").text(i);
                });
            });
    */
</script>

1-code中使用的each，可以看出来他的作用是对选集中的对象进行遍历操作，其中参数d为undefined，参数i为遍历元素的下标，this表示当前操作的对象；

2-code中使用的call，可以看出来其中的d参数就是选集中的对象与this一样，d之后的参数由用户自定义传递；

如果您使用了call也可以变通的实现each的操作过程，例如3-code的例子。