選擇是D3.js的核心概念之一.它基於CSS選擇器.它允許我們在網頁中選擇一個或多個元素.此外，它允許我們修改，追加或刪除與預定義數據集相關的元素.在本章中，我們將瞭解如何使用選擇來創建數據可視化.
D3.js有助於使用以下兩種方法從HTML頁面中選擇元素 :
-
select() : 通過匹配給定的CSS選擇器，僅選擇一個DOM元素.如果給定的CSS選擇器有多個元素，則只選擇第一個元素.
-
selectAll() : 通過匹配給定的CSS選擇器來選擇所有DOM元素.如果您熟悉使用jQuery選擇元素，則D3.js選擇器幾乎相同.
讓我們看看每個方法詳細信息.
select()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p id="fristP">Hello World</p>
</body>
<script>
var text = d3.select("p").text()
console.log(text);
</script>
</html>
控制檯輸出：hello word
如果有多個元素select() 則會自動選擇第一個元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p>Hello World1</p>
<p>Hello World2</p>
</body>
<script>
var text = d3.select("p").text()
console.log(text);
</script>
</html>
控制檯輸出：hello word1
selectAll() 返回一個元素數組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p>Hello World1</p>
<p>Hello World2</p>
</body>
<script>
var selectPs = d3.selectAll("p")
console.log(selectPs);
</script>
</html>
控制檯輸出：[Array(2)]
至於class，id 只需加上 .，# 即可與jquery是一樣的
元素屬性、值等數據添加修改方法：
append()方法：
append()方法將新元素作爲當前選擇中元素的最後一個子元素追加。
text()方法
text（）方法用於設置所選/附加元素的內容。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select("div.myclass").append("span").text("from D3.js");
</script>
</body>
</html>
D3.js提供了各種方法，html（），attr（）和style（）來修改所選元素的內容和樣式。 讓我們看看本章中如何使用修改方法。
html()可以添加html代碼
attr()可以設置元素屬性
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<a href="http://www.baidu.com" title="baidu">百度</a>
<script>
d3.select("a").attr("title","百度");
</script>
</body>
</html>
style()方法用於設置所選元素的樣式屬性
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<a href="http://www.baidu.com" title="baidu">百度</a>
<script>
d3.select("a").attr("title","百度");
d3.select("a").style("color","red");
</script>
</body>
</html>
classed（）方法專門用於設置HTML元素的"class"屬性
給某一元素添加class屬性
d3.select(".myclass").classed("myanotherclass", true);
去除某一元素的某一屬性
d3.select(".myclass").classed("myanotherclass", false);
