• D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据


    D3.js的v5版本入门教程(第三章)

        在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的

        1、选择元素

        在D3.js中,选择元素的函数有两个

    d3.select() 
    d3.selectAll()     
        这两个函数返回的就是选择集

        常见的用法如下:

          

      var body = d3.select("body");//选择文档中的body元素
    var svg = body.select("svg");//选择body中的svg元素
    var p = body.selectAll("p");//选择body中所有的p元素
    var p1 = body.select("p");//选择body中第一个p元素


        2、绑定数据

        D3.js能将数据绑定到 DOM 上,也就是绑定到文档上。例如,如果网页中有一个P元素和一个整数5,我们就将数据5和p绑定在一起。绑定之后,当需要依靠这个数据才操作某元素的时候,使用起来会很方便!(或许这样说还是会使你一头雾水,没关系,通过后面的章节你就会慢慢明白,因为后面的章节的js代码是在这个基础上编写的)

        D3.js中绑定数据的两个函数

    data():讲一个数组绑定到选择集上,数组各项和选择集各元素绑定,也就是一一对应的关系(这里或许敏锐的你会发现问题,下一章节讲)
    datum():将一个数据绑定到所有选择集上
        相比较而言,data()较常用

        datum()的使用

    <body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    
    <script>
    var str = "is an animal";//新建一个字符串
    var p = d3.select("body")
    .selectAll("p");
    
    p.datum(str)//绑定
    .text(function(d,i){
    return "第"+i+"个元素"+d;
    });
    </script>
    </body>


        运行结果:

            

        代码说明:

            -可以发现,本段代码的作用是将str这个字符串绑定代三个<p>选择集上,然后通过一个无名函数function(d,i),访问到绑定的元素。(function(d,i),这样的函数后面会经常出现,其中d代表数据,也就是与某元素绑定的数据,i代表索引,代表数据的索引,从0开始)

        data()的使用

    <body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    
    <script>
    var dataset = ["so cute","cute","fat"];
    var p = d3.select("body")
    .selectAll("p");
    
    p.data(dataset)
    .text(function(d,i){
    return "第"+i+"个动物"+d;
    });
    </script>
    </body>


        运行结果:

            

        代码说明:

            -其实和datum()大体一样,只不过现在是数组元素和选择集有着对应关系
    ————————————————
    版权声明:本文为CSDN博主「数星星等天明」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_34414916/article/details/80026813

  • 相关阅读:
    Prince and princess「DP优化」
    Wooden Stricks——两个递增条件的线性DP
    死磕 java线程系列之线程池深入解析——构造方法
    死磕 java线程系列之线程池深入解析——体系结构
    死磕 java线程系列之自己动手写一个线程池(续)
    死磕 java线程系列之自己动手写一个线程池
    死磕 java线程系列之创建线程的8种方式
    死磕 java线程系列之线程模型
    死磕 java同步系列之终结篇
    死磕 java同步系列之redis分布式锁进化史
  • 原文地址:https://www.cnblogs.com/cangqinglang/p/11609242.html
Copyright © 2020-2023  润新知