D3js中each与call使用区别

2019-01-10 14:31:35 骤逝阅读数 504更多

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../d3.min.js"></script>
    <style type="text/css">
        .red {
            background-color: red;
        }

        .box {
            height: 100px;
             100px;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<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>
</body>
</html>

1.code中使用的each，可以看出来他的作用是对选集中的对象进行遍历操作，其中参数d为undefined，参数i为遍历元素的下标，this表示当前操作的对象；
2.code中使用的call，可以看出来其中的d参数就是选集中的对象与this一样，d之后的参数由用户自定义传递；
如果您使用了call也可以变通的实现each的操作过程，例如3-code的例子。