《D3.js数据可视化实战手册》——2.2 选择单个元素

xiaoxiao2024-03-26 108

本节书摘来异步社区《D3.js数据可视化实战手册》一书中的第2章，第2.2节，作者：【加拿大】Nick Qi Zhu，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 选择单个元素

在进行视觉处理时，我们常常需要选择页面上的单个元素。本例将展示在D3中如何使用CSS选择器来选取特定单个元素。

2.2.1 准备阶段

请在浏览器中打开如下文件的本地副本。

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/single-selection.html

2.2.2 开始编程

让我们来选取一些元素并在屏幕上打印经典的“hello world”信息。

<p id="target"></p> <script type="text/javascript"> d3.select("p#target") // <-- B .text("Hello world!"); // <-- C </script>

本例将在屏幕上显示“hello world”。

2.2.3 工作原理

在D3中，我们用d3.select方法来实现对单个元素的选取。该select方法接受一个CSS3选择器字符串或者待操作对象的引用，并返回一个D3选集。随后，就可以用级联修饰函数对该选集的属性以及HTML进行操作了。

技巧.tif 如果发现多个匹配元素，最终只返回第一个匹配的元素。

本例中，我们在B行，通过id的值选取了段落元素，然后在C行中将它的文本设置为hello world。所有的D3选集都支持一系列标准修饰函数，本例中用到的text函数就是其中之一。下面列出了本书中用到的部分常见修饰函数。

selection.attr函数：用来读取或改变元素上的给定属性。 // 将p元素的foo属性设为goo d3.select("p").attr("foo", "goo"); //读取p元素的foo属性 d3.select("p").attr("foo"); selection.classed函数：用来添加、删除选定元素上的css class。 // 检测p元素是否有名为goo的class d3.select("p").classed("goo"); //为p元素添加goo class d3.select("p").classed("goo", true); //移除p元素上的goo class。classed方法也接受函数作为参数传入， // 从而可以动态地添加或移除css class d3.select("p").classed("goo", function(){return false;}); selection.style函数：用来给选定元素添加指定样式。 // 获取p元素的font-size d3.select("p").style("font-size"); //将font-size的值设为10px d3.select("p").style("font-size", "10px"); //将font-size的值设为某个函数的运算结果。style方法也接受函数作为参数传入， // 从而可以动态地改变样式的值 d3.select("p"). style("font-size", function(){ return normalFontSize + 10;}); selection.text函数：用来获取或设置选定元素的文本内容。 // 获取p元素的文本内容 d3.select("p").text(); // 将p元素的文本内容设为"hello" d3.select("p").text("Hello"); // text方法也接受函数作为参数传入，从而可以动态地改变文本内容 d3.select("p").text(function () { var model = retrieveModel(); return model.message; }); selection.html函数：用来更改元素内的HTML。 // 获取p元素的inner html d3.select("p").html(); // 将p元素的inner html 设为 "<b>Hello</b>" d3.select("p").text("<b>Hello</b>"); // html方法也接受函数作为参数传入，从而可以动态地改变元素内的HTML d3.select("p").text(function () { var template = compileTemplate(); return template(); });

这些修饰函数可用于单个元素以及多个元素，当应用于多元素选集时，这些函数会依次作用于其中每个元素。在后续的内容中将会看到类似示例。

提示.tif 当函数被作为参数传入修饰函数时，其实同时还有一些其他的隐含参数传入，最终实现了数据驱动计算。D3的强大之处就在于数据驱动的方式，它的名称数据驱动文档（data-driven document），也正是来自于此。我们在后续章节中会详细讨论这一问题。