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

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. SQL Injection (Blind)

    Low级别基于布尔的盲注思路 1.判断是否存在注入,注入是字符型还是数字型 2.猜解当前数据库名 3.猜解数据库中的表名 4.猜解表中的字段名 5.猜解数据 判断是否有sql注入 输入1.1’ and ...

  2. kali之DVWA

    简介 DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法的环境, ...

  3. iOS - 架构模式 - 解密 MVC、MVP、MVVM、VIPER架构

    在 iOS 中使用 MVC 架构感觉很奇怪? 迁移到MVVM架构又怀有疑虑?听说过 VIPER 又不确定是否真的值得切换? 相信你会找到以上问题的答案,如果没找到请在评论中指出. 你将要整理出你在 i ...

  4. vue 利用v-model实现父子组件数据双向绑定

    v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...

  5. 关于定义变量名为"name"的坑！！！

    昨天下午没有什么工作可做,闲来无事就上博客园看看了,有个问题让我一直很纳闷. 直接上代码吧: 再用表达式创建函数时遇到的问题,这里的代码按照正常逻辑只有那个在变量定义后面的函数执行打印的值才是&quo ...

  6. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  7. Java -- springboot 配置 freemarker

    1.添加依赖 org.springframework.boot spring-boot-starter-freemarker 2.配置application.properties spring.fre ...

  8. python SqlServer操作

    python连接微软的sql server数据库用的第三方模块叫做pymssql(document:http://www.pymssql.org/en/stable/index.html).在官方文档 ...

  9. Hadoop1.x与Hadoop2.x之间的差异

    一.Hadoop2.x产生背景 1.Hadoop1.x中的HDFS和MapReduce在高可用.扩展性等方面存在问题. 2.HDFS存在的问题 1.NameNode单点故障,难以应用于在线场景. 2. ...

  10. 【python】udp 数据的发送和接收

    import socket def send_message(): # 创建一个udp套接字 udp_socker = socket.socket(socket.AF_INET,socket.SOCK ...