Web开发——D3.js——选择

最新推荐文章于 2025-06-08 09:02:33 发布

web王

最新推荐文章于 2025-06-08 09:02:33 发布

阅读量1k

点赞数 24

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_53218076/article/details/140214011

选择是D3.js的核心概念之一，它基于CSS选择器。允许我们在网页中选择一个或多个元素。此外，它允许我们修改、追加或删除与预定义数据集相关的元素。在本文中，我将介绍如何使用选择来创建数据可视化。

D3.js使用以下两种方法从HTML页面中选择元素：

select()：通过匹配给定的CSS选择器，仅选择一个DOM元素。如果给定的CSS选择器有多个元素，则只选择第一个元素。
selectAll()：通过匹配给定的CSS选择器来选择所有DOM元素。

让我们详细说说这两种方法。

select()

select()方法根据CSS选择器选择HTML元素。在CSS选择器中，我们可以通过以下三种方式定义和访问HTML元素：

HTML元素的标记(例如div ，h1，p，span等)
HTML元素的类名称
HTML元素的ID

让我们看一下实例。

按标记选择

我们可以选择使用TAG的HTML元素。以下语法用于选择"div"标签元素。

d3.select("div")

示例 : 创建一个文件"select_by_tag.html"并添加以下代码。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

这段代码包含了一个<div>元素和一个使用D3.js库的JavaScript代码块。

解释一下，代码的功能如下：
1. <!DOCTYPE html>：声明文档类型是HTML5。
2. 在<head>部分引入D3.js库，库的版本是v4。
3. 在<body>部分，有一个包含文本"Hello World!"的<div>元素。
4. 在<script>标签中，使用D3.js库的 d3.select("div").text()方法选择<div>元素并弹出显示该<div>元素的内容（即"Hello World!"）。

当这段代码在浏览器中被运行时，会弹出一个警告框显示"Hello World!"。可以自己去试一试。

按类名称选择

可以使用以下语法选择使用CSS类设置样式的HTML元素。

d3.select(".<class name>")

示例 : 创建一个文件"select_by_class.html"并添加以下代码。

<!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>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

这段代码与之前的代码几乎相同，只是在<div>元素中添加了一个class="myclass"属性，让它具有一个自定义的类名。在JavaScript代码块中，d3.select(".myclass")代替了之前的d3.select("div")，这样就可以选择具有 myclass 类的<div>元素。

因此，在这种情况下，JavaScript代码使用D3.js库来选择具有 myclass 类的<div>元素，然后弹出显示该元素的文本内容"Hello World!"。

按元素ID选择

HTML页面中的每个元素都应具有唯一的ID。我们可以使用元素的唯一ID，通过下面指定的select（）方法来访问它。

d3.select("#<id of an element>")

示例 : 创建一个文件"select_by_id.html"并添加以下代码。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

同样的，在这段代码中<body>部分有一个包含文本"Hello World!"的<div>元素，并分配了一个id为"hello"。
而在<script>标签中，使用D3.js库的d3.select("#hello").text()方法选择具有id为"hello"的<div>元素，并弹出显示该元素的文本内容"Hello World!"。

当这段代码在浏览器中被运行时，同样会弹出一个警告框显示"Hello World!"，因为JavaScript代码选择了具有id为"hello"的<div>元素，并显示了其文本内容。

selectAll()

selectAll（）方法用于选择HTML文档中的多个元素。select方法选择第一个元素，但selectAll方法选择与特定选择器字符串匹配的所有元素。如果选择匹配none，则返回空选择。我们也可以在selectAll（）方法中链接所有附加的修改方法，append（），html（），text（），attr（），style（），classed（）等。在这种情况下，方法将影响所有匹配元素。

我们通过创建新网页"select_multiple.html"来简单理解并添加以下代码：

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

这段代码是<body>部分有一个包含文本"Message"的<h2>元素和一个包含文本"Hello World!"的<div>元素，它们都具有相同的类名"myclass"。
在<script>标签中，使用D3.js库的d3.selectAll(".myclass").attr("style", "color: red")方法选择所有具有类名"myclass"的元素，然后将它们的样式设置为红色。

当这段代码在浏览器中运行时，所有具有类名"myclass"的元素，包括<h2>和<div>元素，将会被设置为红色文本颜色。这是通过D3.js库的attr()方法来实现的，用于设置元素的样式。

在下一篇文章中，我们将学习与选择相关的append（），text（），html（），attr（）和style（）这些方法。关注Web王，跟我学习更多Web开发知识。