D3.js 就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。
1、选择器
d3.select()d3.selectAll()
介绍下常见用法如下（这里先说下基本用法，第四章会详细介绍）：
hello
运行效果：
说明D3的选择器 跟jquery中的使用一样 这下用起来很顺手
2、数据绑定
D3 中是通过以下两个函数来绑定数据的：
datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
首先来看datum()：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datumtitle>
<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>datumtitle>
<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>datumtitle>
<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 }；但是一定要是有返回值的函数。