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 }；但是一定要是有返回值的函數。