• D3.js中对array的使用


    由于D3类库和array密切相关,我们有必要讨论一下D3中的数据绑定以及在数组内部运算的方法。

    1.D3中的数组

    和其他编程语言一样,D3的数组元素可以是数字或者字符等类型,例如:

    someData=[20,36,48,59,600,88];

    此外,考虑json数据在网络传输中的便利性,D3数组也支持将json对象,如:

    someBook=[{name:"book1", price: 50}, {name:"book2", price: 150}, {name:"book3", price: 350}];

    2.D3中的数组过滤功能

    array有一个filter()方法,这个方法的返回值是array中满足自定义需求的数据数组。例如:

    someNumer.filter(function(sn) {return sn >= 40});

    这条语句中使用了someNumber这个array的filter方法,它使用了一个function,此function中将someNumber中的每一个元素(命名为sn)进行遍历,如果满足自定义条件(大于等于40),则将此元素拷贝至一个新建的数组中,最后的返回值便是这个数组。

    3.绑定,enter()和exit()

    D3使用data()方法将数组和选择的CSS元素进行绑定;

    enter()方法定义了当数组元素超过已经绑定或者选择的CSS元素的个数时,则生成新的CSS元素,使用新CSS元素与数组中数据进行绑定;

    exit()方法定义了当数组元素超过已经绑定或者选择的CSS元素的个数时,则抛弃多余的数组元素。

    <html>
    <head>
        <meta  http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>test</title>    
        <script type="text/javascript" src="d3.js"></script>
        
    </head>
    <style>
    #borderdiv {
    width: 200px;
    height: 50px;
    border: 1px solid gray;
    }
    </style>
        
    <body>
        <div id="borderdiv"> </div>  
    </body>
        
    <script>var someNumbers = [17, 82, 9 ,500, 40];
    var smallerNumers = someNumbers.filter(function(e1){return e1 <= 40 ? this : null});
        d3.select("body").selectAll("div")
        .data(smallerNumers)
        .enter()
        .append("div")
        .html(function(sd) {return sd})
        .style("font-weight", "900");
    </script>
    
    </html>

    上面的代码中,smallerNumber中将会含有17,9,40三个元素,但是只有broderdiv这一个div,所以当执行上面的脚本后,会为9和40新生成两个div。如图

    当然,如果将上述代码中的enter()方法替换为exit(), 那么9和40将被丢弃,不会生成新的div。

    参考:d3.js in action

  • 相关阅读:
    ch2_CaseStudy_CanonicalNASLScript.txt
    树形数据广度排序处理示例.sql
    编程管理SQL SERVER的帐号.sql
    索引影响查询结果顺序的示例
    校验表中数据是否有循环编码的通用存储过程.sql
    BackupAndRestoreSmallWorks.sql
    cPanel下安装GodaddySSL教程
    ExcludingRNG.cs
    SymmetricAlgorithmEvaluator.cs
    操作SQLSERVERAGENT服务的扩展存储过程.sql
  • 原文地址:https://www.cnblogs.com/shuaiwang/p/4607600.html
Copyright © 2020-2023  润新知