D3提供了兩種高級方法來選擇元素：select和selectAll。這些方法接收選擇器字符串。前者只返回第一個匹配的元素，後者選擇在文檔遍歷次序中所有匹配的元素。這個方法也可以接收節點，這可以用來和第三方庫例如JQuery或者開發工具($0)整合。
選中標籤節點或對應的選擇器(.class #id)
<!--
@author Semper_Fi
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<title></title>
<style>
</style>
</head>
<body>
<p>Hello D3.js</p>
<p>Hello D3.js</p>
<h4 class="change-class">666666666666</h4>
<h6>tom</h6>
<h6 id="change-id">jerry</h6>
<h6 class="change-class">jason</h6>
<a id="baidu" href="http://www.baidu.com">baidu</a>
<p id='p'>pppppppppppppp</p>
</body>
<script>
d3.select("body").selectAll("p").text("選擇body標籤下的所有P標籤中的文字進行替換");
d3.select("body").select("h4").text("選擇body標籤下的h4標籤中的文字進行替換");
// selectAll select這兩個函數返回的結果稱爲選擇集,選擇集和綁定數據通常是一起使用的。
d3.select("h6").text("直接選擇h6標籤中的文字進行替換"); // 只會改變第一個匹配上的值
// D3 中是通過以下兩個函數來綁定數據的,
// datum()：綁定一個數據到選擇集上
// data()：綁定一個數組到選擇集上，數組的各項值分別與選擇集的各元素綁定
var h6 = d3.selectAll("h6");
var str = ", 新的數據"
// 當選擇集需要使用被綁定的數據時，常需要這麼使用。其包含兩個參數，其中：val 代表數據，也就是與某元素綁定的數據。
// index 代表索引，代表數據的索引號，從 0 開始
h6.datum(str).text(function(val, index){
return "第" + index + "個數據綁定" + val;
})
var set = ["喜歡狗", "喜歡貓", "喜歡豬"];
var p = d3.selectAll("p");
p.data(set).text(function(val, index){
return val;
})
var p1 = d3.select("p");
p1.style("color", "red");
// 通過id選擇器，精準選擇要改變的標籤
var h6_1 = d3.select("#change-id");
h6_1.style("color", "yellow");
// 通過class選擇器批量選擇要改變的標籤
var clas = d3.selectAll(".change-class");
clas.style("color", "orange");
// 在所有p標籤後新增一個p標籤,且該標籤和前一個標籤具有相同的樣式
d3.select("body").selectAll("p").append("p").text("在所有p標籤後新增一個p標籤");
// 在id=baidu的標籤前插入p標籤
d3.select("body").insert("p", "#baidu").text("在id=baidu的標籤前插入一個p標籤")
//
</script>
</html>
