教程 > D3.js 教程 > D3.js 教程 阅读：544

D3.js 操作DOM

添加 DOM 元素

D3.js 选择提供了append() 和 text() 方法来将新元素附加到现有的 HTML 文档中。本节详细介绍了添加 DOM 元素。

append() 方法

append() 方法添加一个新元素作为当前选择中元素的最后一个子元素。此方法还可以修改元素的样式、它们的属性、HTML 和文本内容。

创建一个网页“select_and_append.html”并添加以下内容

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

尝试一下

通过浏览器请求网页，您可以看到以下输出

Hello World!

在这里， append() 方法在 div 标签内添加了一个新的标签 span，如下所示

<div class = "myclass">
   Hello World!<span></span>
</div>

text() 方法

text() 方法用于设置选定/附加元素的内容。让我们更改上面的示例并添加 text() 方法，如下所示

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v6.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>

尝试一下

以上代码输出如下结果

Hello World! from D3.js

此处，上述脚本执行链接操作。D3.js 巧妙地采用了一种称为链式语法的技术。通过将方法与句点.链接在一起，我们可以在一行代码中执行多个操作。它快速而简单。同样的脚本也可以在没有链语法的情况下访问，如下所示。

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

修改元素

D3.js 提供了多种方法，html()、attr()和style()来修改所选元素的内容和样式。让我们看看本章中如何使用修改方法。

html() 方法

html() 方法用于设置选定/附加元素的 html 内容。

创建一个网页“select_and_add_html.html”并添加以下代码。

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

尝试一下

以上代码输出如下结果

Hello World! from D3.js

attr() 方法

attr() 方法用于添加或更新所选元素的属性。创建一个网页“select_and_modify.html”并添加以下代码。

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

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

尝试一下

上述代码执行结果如下

d3 attr 运行结果

style() 方法

style() 方法用于设置被选元素的样式属性。创建一个网页“select_and_style.html”并添加以下代码。

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

尝试一下

上述代码执行结果如下

d3 attr 运行结果

classed() 方法

classed() 方法专门用于设置 HTML 元素的“class”属性。因为，单个 HTML 元素可以有多个类；我们在为 HTML 元素分配类时需要小心。这个方法知道如何处理一个元素上的一个或多个类，并且它很高效。

  • 添加类 - 要添加类，类方法的第二个参数必须设置为 true。它定义如下
d3.select(".myclass").classed("myanotherclass", true);
  • 删除类 - 要删除类，类方法的第二个参数必须设置为 false。它定义如下
d3.select(".myclass").classed("myanotherclass", false);
  • 检查类 - 要检查类是否存在，只需省略第二个参数并传递您正在查询的类名。如果存在，则返回 true，否则返回 false。
d3.select(".myclass").classed("myanotherclass");

如果选择中的任何元素具有该类，这将返回 true。使用d3.select进行单个元素选择。

  • 切换类 - 将类翻转到相反的状态 - 如果它已经存在，则将其删除，如果尚不存在，则添加它 - 可以执行以下操作之一。

对于单个元素，代码可能如下所示 -

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

查看笔记

扫码一下
查看教程更方便