版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
选择集
- d3.select() 选择第一个元素
- d3.selectAll()选择所有元素
使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。
选择元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The Third</title>
</head>
<script src="../../../JS/d3.min.js"></script>
<body>
<!-- 选择元素 -->
<p>First</p>
<p id="Second">Second</p>
<p>Third</p>
<p class = "myClass">Fourth</p>
<p class = "myClass">Fifth</p>
<!-- 选择第一个元素 -->
<script>
var p1 = d3.select("p").style('color', 'red');
</script>
<!-- 选择三个/所有元素 -->
<script>
var p = d3.selectAll("p").style('color','pink');
</script>
<!-- 选择第二个元素 -->
<script>
var p2 = d3.select("#Second").style('color','green');
</script>
<!-- 选择最后两个元素 -->
<script>
var p3 = d3.selectAll(".myClass").style('color','yellow');
</script>
<!-- 关于 select 和 selectAll 的参数,
其实是符合 CSS 选择器的条件的,
即用“井号(#)”表示 id,用“点(.)”表示 class。 -->
</body>
</html>