Categories
D3.js教程

D3.js-选择

D3.js-选择


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

D3.js使用以下两种方法帮助从HTML页面选择元素-

  • select() -通过匹配给定的CSS选择器仅选择一个DOM元素。如果给定的CSS选择器有多个元素,它将仅选择第一个。

  • selectAll() -通过匹配给定的CSS选择器选择所有DOM元素。如果您熟悉使用jQuery选择元素,则D3.js选择器几乎相同。

让我们详细介绍每种方法。

select()方法

select()方法基于CSS选择器选择HTML元素。在CSS选择器中,您可以通过以下三种方式定义和访问HTML元素-

  • HTML元素的标签(例如div,h1,p,span等)
  • HTML元素的类名
  • HTML元素的ID

让我们通过示例来实际了解它。

按标签选择

您可以使用其TAG选择HTML元素。以下语法用于选择“ div”标签元素,

d3.select(“div”)

示例-创建页面“ select_by_tag.html”并添加以下更改,

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

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

通过浏览器请求网页,您将在屏幕上看到以下输出:

按类别名称选择

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

d3.select(“.<class name="">”)
</class>

创建一个网页“ select_by_class.html”并添加以下更改-

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

   
      <div class="myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   

通过浏览器请求网页,您将在屏幕上看到以下输出:

通过ID选择

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

d3.select(“#<id of="" an="" element="">”)
</id>

创建一个网页“ select_by_id.html”并添加以下更改。

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

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

通过浏览器请求网页,您将在屏幕上看到以下输出。

添加DOM元素

D3.js选择提供了append()text()方法,以将新元素追加到现有HTML文档中。本节详细说明有关添加DOM元素的信息。

append()方法

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

创建一个网页“ select_and_append.html”并添加以下更改-

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

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

通过浏览器请求网页,您可以在屏幕上看到以下输出,

在这里,append()方法在div标签内添加了一个新标签范围,如下所示-

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

text()方法

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

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

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

现在刷新网页,您将看到以下响应。

在这里,上述脚本执行链接操作。 D3.js巧妙地采用了一种称为链语法的技术,您可以从jQuery中识别出这一技术。通过将方法与句点链接在一起,您可以在一行代码中执行多个操作。快速简便。相同的脚本也可以不使用链式语法进行访问,如下所示。

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”并添加以下代码。

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

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

通过浏览器请求网页,您将在屏幕上看到以下输出。

attr()方法

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

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

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

通过浏览器请求网页,您将在屏幕上看到以下输出。

style()方法

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

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

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

通过浏览器请求网页,您将在屏幕上看到以下输出。

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"));

selectAll()方法

selectAll()方法用于选择HTML文档中的多个元素。 select方法选择第一个元素,但是selectAll方法选择与特定选择器字符串匹配的所有元素。如果选择不匹配,则返回空选择。我们也可以在selectAll()方法中链接所有附加的修改方法, append(),html(),text(),attr(),style(),classed()等。在这种情况下,方法将影响所有匹配的元素。让我们通过创建一个新的网页“ select_multiple.html”并添加以下脚本来理解-

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

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

通过浏览器请求网页,您将在屏幕上看到以下输出。

在这里,attr()方法适用于divh2标签,并且两个标签中的文本颜色都变为红色。

error: 内容受到保护 !!