D3.js的v5版本入门教程（第三章）

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

1、选择元素

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

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

常见的用法如下：

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

2、绑定数据

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

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

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

datum()的使用

  1. <body>
  2. <p>dog</p>
  3. <p>cat</p>
  4. <p>pig</p>
  5.  
  6. <script>
  7. var str = "is an animal";//新建一个字符串
  8. var p = d3.select("body")
  9. .selectAll("p");
  10.  
  11. p.datum(str)//绑定
  12. .text(function(d,i){
  13. return "第"+i+"个元素"+d;
  14. });
  15. </script>
  16. </body>

运行结果：

代码说明：

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

data()的使用

  1. <body>
  2. <p>dog</p>
  3. <p>cat</p>
  4. <p>pig</p>
  5.  
  6. <script>
  7. var dataset = ["so cute","cute","fat"];
  8. var p = d3.select("body")
  9. .selectAll("p");
  10.  
  11. p.data(dataset)
  12. .text(function(d,i){
  13. return "第"+i+"个动物"+d;
  14. });
  15. </script>
  16. </body>

运行结果：

代码说明：

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

D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据的更多相关文章

  1. D3.js的v5版本入门教程（第九章）——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  2. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  3. D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  4. D3.js的v5版本入门教程（第十一章）——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  5. D3.js的v5版本入门教程（第八章）—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  6. D3.js的v5版本入门教程（第七章）—— 比例尺的使用

    D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...

  7. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  8. D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

    D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...

  9. D3.js的v5版本入门教程（第十章）

    在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...

随机推荐

  1. mysql-配置与使用(跳过原始密码登陆)

    目录 简单的使用步骤 环境变量的操作 配置文件的使用 查找进程 mysql 5.6 管理员密码的设置 简单的使用步骤 bin 下面有mysqld.exe 是服务端程序, mysql.exe 是客户端程 ...

  2. 在Windows中运行Linux bash命令的几种方法

    如果你正在课程中正在学习 shell 脚本,那么需要使用 Linux 命令来练习命令和脚本. 你的学校实验室可能安装了 Linux,但是你自己没有安装了 Linux 的笔记本电脑,而是像其他人一样的 ...

  3. JUC - Monitor监控ThreadPoolExecutor

    JUC - Monitor监控ThreadPoolExecutor 一个自定义Monitor监控ThreadPoolExecutor的执行情况 TASK WokerTask class WorkerT ...

  4. 【开发工具】 - win10设置path变量怎样列表展示？

    如果你的变量值以%开头,打开编辑的时候就会显示一串的变量值,不方便查找编辑. 所以将变量值更改为以盘符开始,就可以解决这个问题,比如:D:\apache-maven-3.6.1\bin\

  5. 图解HTTP（二）

    第四章 返回结果的HTTP状体码 1.状态码告知从服务器返回的结果   类别 原因短语 1XX Infomational信息性状态码 接收的请求正在处理中 2XX Success成功状态码 请求正常处 ...

  6. JavaWeb 之 Filter 敏感词汇过滤案例

    需求: 1. 对day17_case案例录入的数据进行敏感词汇过滤 2. 敏感词汇参考 src路径下的<敏感词汇.txt> 3. 如果是敏感词汇,替换为 *** 分析: 1. 对reque ...

  7. sql 查询某个字段最长的记录

    sql  查询文本字段中值的长度最长的记录 一.函数1.SQL ServerLEN() 函数返回文本字段中值的长度.SELECT LEN(column_name) FROM table_name;2. ...

  8. C#-将照片存入到SQL SERVER

    将存照片的字段设为image类型. using System; using System.Collections.Generic; using System.ComponentModel; using ...

  9. rancheros在vm主机部署

    问题描述: 容器化,越来越重要.在云服务中很大比例的服务都跑在容器中,今天介绍rancheros基于容器的os. 特点: 启动快,比较小系统服务也是基于容器化 使用最新的docker release ...

  10. rhce 考试题目总结

    rhce 考试题目总结归类 开机需要做的事: 检查系统版本 配置yum源 修改selinux的模式 ping一下server机器 1.分区类题目 1.1 rhcsa 第十五题 添加swap分区 要点: ...