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

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

Python数据分析系列01-数据可视化展示 人生总是在不断的经历机遇与挑战，尽管现在的人很多都会选择躺平，但不得不承认的是，即便是一个躺平的人，同样会遇到一些生活中的挑战，而当你没有办法回避的时候，也就只能迎难而上了。 我们不该因为困难就轻易放弃，因为一切都会更加的值得。
做数据可视化，为什么我们不再直接使用D3.js、Echarts D3是什么 全称是（Data-Driven Documents）,一个被数据驱动的文档 简单点，是一个JavaScript函数库，使用它主要用来做数据可视化。 D3 是一个开源项目，作者是纽约时报的工程师。 学习 D3 需要什么预备知识 HTML：超文本标记语言，用于设定网页的内容 CSS：层叠样式表，用于设定网页的样式 JavaScript：一种直译式脚本语言，用于设定网页的行为 DOM：文档对象模型，用于修改文档的内容和结构 SVG：可缩放矢量图形，用于绘制可视化的图形
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。