可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定
D3.js 就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。
1、选择器
d3.select()d3.selectAll()
介绍下常见用法如下（这里先说下基本用法，第四章会详细介绍）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<h3></h3>
<h4 id="h4"></h4>
<h3 title="author"></h3>
<h3 class="date"></h3>
</body>
<script>
var h3 = d3.select("body").selectAll("h3");
var h4 = d3.select("h4");
var author = d3.select("[title='author']");
var date = d3.select(".date");
h3.text('日照香炉生紫烟');
h4.text('遥看瀑布挂前川');
author.text('李白');
date.text('2020-3-26');
</script>
</html>
运行效果：
说明D3的选择器 跟jquery中的使用一样 这下用起来很顺手
2、数据绑定
D3 中是通过以下两个函数来绑定数据的：
datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
首先来看datum()：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>datum</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <h3></h3> <h3></h3> <h3></h3> <h3></h3> </body> <script> var h3 = d3.selectAll('h3'); h3.datum('我是一只小小小小鸟').text(function (v,i) { return '我是第'+ i +'个h3标签，内容是：'+ v; }) // 运行结果如下： // 我是第0个h3标签，内容是：我是一只小小小小鸟 // 我是第1个h3标签，内容是：我是一只小小小小鸟 // 我是第2个h3标签，内容是：我是一只小小小小鸟 // 我是第3个h3标签，内容是：我是一只小小小小鸟 </script> </html>
然后再看data()：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>datum</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <h3></h3> <h3></h3> <h3></h3> <h3></h3> </body> <script> var lyrics = [ '我是一只小小小小鸟', '想要飞呀飞却飞也飞不高', '我寻寻觅觅寻寻觅觅一个温暖的怀抱', '这样的要求算不算太高' ]; var h3 = d3.selectAll('h3'); h3.data(lyrics).text(function (v,i) { return '我是第'+ i +'个h3标签，内容是：'+ v; }) // 运行结果如下： // 我是第0个h3标签，内容是：我是一只小小小小鸟 // 我是第1个h3标签，内容是：想要飞呀飞却飞也飞不高 // 我是第2个h3标签，内容是：我寻寻觅觅寻寻觅觅一个温暖的怀抱 // 我是第3个h3标签，内容是：这样的要求算不算太高 </script> </html>
细细品 能看出差别吧；
data() 中数据与选择集元素是一一对应关系；
datum() 中是数据对应所有（多个）选择集元素；
注意：
h3.datum('我是一只小小小小鸟')，直接绑定的一个字符串数据；
如果是在 h3.data() 方法的例子中 直接绑定一个字符串 那么运行结果就会有点出乎意料，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>datum</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> </body> <script> var h3 = d3.selectAll('h3'); h3.data('我是一只小小小小鸟').text(function (v,i) { return '我是第'+ i +'个h3标签，内容是：'+ v; }) // // 运行结果如下： // 我是第0个h3标签，内容是：我 // 我是第1个h3标签，内容是：是 // 我是第2个h3标签，内容是：一 // 我是第3个h3标签，内容是：只 // 我是第4个h3标签，内容是：小 // 我是第5个h3标签，内容是：小 // 我是第6个h3标签，内容是：小 // 我是第7个h3标签，内容是：小 // 我是第8个h3标签，内容是：鸟 </script> </html>
当然 data()方法中 参数还可以是一个 function （） { return array }；但是一定要是有返回值的函数。
