zoukankan      html  css  js  c++  java
  • D3js中each与call使用区别

    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的例子。

  • 相关阅读:
    eclipse的web项目热部署
    JAVA字符串转日期或日期转字符串
    右下角弹出框
    div拖拽
    js的富文本框与日期插件
    slected多选框的转移
    判断当前日期是否是当月数据
    java常见面试题(二)
    静态代理和动态代理
    java常见面试题(一)
  • 原文地址:https://www.cnblogs.com/grj001/p/12223680.html
Copyright © 2011-2022 走看看