d3.js和mysql_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()的使用

dog

cat

pig

var str = "is an animal";//新建一个字符串

var p = d3.select("body")

.selectAll("p");

p.datum(str)//绑定

.text(function(d,i){return "第"+i+"个元素"+d;

});

运行结果：

代码说明：

-可以发现，本段代码的作用是将str这个字符串绑定代三个

选择集上，然后通过一个无名函数function(d,i)，访问到绑定的元素。(function(d,i)，这样的函数后面会经常出现，其中d代表数据，也就是与某元素绑定的数据，i代表索引，代表数据的索引，从0开始)

data()的使用

dog

cat

pig

var dataset = ["so cute","cute","fat"];var p = d3.select("body")

.selectAll("p");

p.data(dataset)

.text(function(d,i){return "第"+i+"个动物"+d;

});

运行结果：

代码说明：

-其实和datum()大体一样，只不过现在是数组元素和选择集有着对应关系

————————————————

版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_34414916/article/details/80026813

喜欢这篇文章？欢迎打赏~~