📅 最后修改于: 2020-10-26 05:58:17 🧑 作者: Mango
选择是D3.js的核心概念之一。它基于CSS选择器。它使我们可以选择网页中的一个或多个元素。另外，它允许我们修改，附加或删除与预定义数据集相关的元素。在本章中，我们将看到如何使用选择来创建数据可视化。
D3.js使用以下两种方法帮助从HTML页面选择元素-
select（） -通过匹配给定的CSS选择器仅选择一个DOM元素。如果给定的CSS选择器有多个元素，它将仅选择第一个。
selectAll（） -通过匹配给定的CSS选择器选择所有DOM元素。如果您熟悉使用jQuery选择元素，则D3.js选择器几乎相同。
让我们详细介绍每种方法。
select（）方法基于CSS选择器选择HTML元素。在CSS选择器中，您可以通过以下三种方式定义和访问HTML元素-
让我们通过示例来实际了解它。
您可以使用其TAG选择HTML元素。以下语法用于选择“ div”标签元素，
d3.select(“div”)
示例-创建页面“ select_by_tag.html”并添加以下更改，
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出：
可以使用以下语法选择使用CSS类设置样式的HTML元素。
d3.select(“.”)
创建一个网页“ select_by_class.html”并添加以下更改-
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出：
HTML页面中的每个元素都应具有唯一的ID。我们可以使用元素的这个唯一ID来通过以下指定的select（）方法访问它。
d3.select(“#”)
创建一个网页“ select_by_id.html”并添加以下更改。
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出。
D3.js选择提供了append（）和text（）方法，以将新元素追加到现有HTML文档中。本节详细说明有关添加DOM元素的信息。
append（）方法将新元素追加为当前选择中元素的最后一个子元素。此方法还可以修改元素的样式，它们的属性，属性，HTML和文本内容。
创建一个网页“ select_and_append.html”并添加以下更改-
Hello World!
通过浏览器请求网页，您可以在屏幕上看到以下输出，
在这里，append（）方法在div标签内添加了一个新标签范围，如下所示-
Hello World!
text（）方法用于设置所选/附加元素的内容。让我们更改上面的示例，并添加text（）方法，如下所示。
Hello World!
现在刷新网页，您将看到以下响应。
在这里，上述脚本执行链接操作。 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内容。
创建一个网页“ select_and_add_html.html”并添加以下代码。
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出。
attr（）方法用于添加或更新所选元素的属性。创建一个网页“ select_and_modify.html”并添加以下代码。
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出。
style（）方法用于设置所选元素的style属性。创建一个网页“ select_and_style.html”并添加以下代码。
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出。
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（）方法用于选择HTML文档中的多个元素。 select方法选择第一个元素，但是selectAll方法选择与特定选择器字符串匹配的所有元素。如果选择不匹配，则返回空选择。我们也可以在selectAll（）方法中链接所有附加的修改方法， append（），html（），text（），attr（），style（），classed（）等。在这种情况下，方法将影响所有匹配的元素。让我们通过创建一个新的网页“ select_multiple.html”并添加以下脚本来理解-
Message
Hello World!
通过浏览器请求网页，您将在屏幕上看到以下输出。
在这里，attr（）方法适用于div和h2标签，并且两个标签中的文本颜色都变为红色。