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

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><!-- A -->
<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），也正是来自于此。我们在后续章节中会详细讨论这一问题。