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

最新推荐文章于 2021-12-29 12:03:17 发布

isOllie

最新推荐文章于 2021-12-29 12:03:17 发布

阅读量417

点赞数 1

分类专栏： D3.js 文章标签：数据可视化 D3 选择元素 select selectAll

本文链接：https://blog.csdn.net/qq_39141486/article/details/102765672

版权

D3.js 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

选择集

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>

isOllie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化 D3.js 选择集与选择元素

选择集d3.select（）选择第一个元素d3.selectAll（）选择所有元素使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。选择元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录