数据可视化 D3 选择集与选择元素

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_39141486/article/details/102765672

选择集

  • 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>

猜你喜欢

转载自blog.csdn.net/qq_39141486/article/details/102765672