《D3.js数据可视化实战手册》—— 2.1 简介

简介:

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

2.1 简介

选集(selection)是基于D3的可视化项目的重要基础之一,它用来定位页面上的特定视觉元素。如果你已经熟知W3C的标准CSS选择器,或一些流行的JavaScript库(如jquery或Zepto.js)提供的选择器API,那么掌握D3的选择器API对你来说将易如反掌。不过,即便从未接触过选择器也无妨,本章将借助一些生动的例子,带领你一步步地进入选择器的世界,这些例子涵盖了可视化中的绝大多数应用场景。

所有的现代浏览器都内嵌支持W3C的标准选择器API。然而,在网络开发,尤其数据可视化领域的开发中,这些API仍然具有局限性。它们只提供选择器,却并不提供集合类型。也就是说,虽然选择器API有助于在文档中选择元素,然而为了操作这些元素,你仍然需要遍历每个元素,如以下代码段所示。

var i=document.querySelectorAll("p").iterator();
var e;
while(e=i.next()){
//对每个选中的元素进行操作
console.log(e);
}```
上面的代码先选取了文档中所有的p元素,然后迭代遍历每个元素并进行相应操作。而在可视化项目中,我们需要不断地对页面上不同元素做类似操作,这将很快演变成为单调的反复。为了减少开发中的琐碎工作,D3引入了自己的选择器API。本章接下来会详细介绍D3的API是如何工作的,以及它具有哪些出色的特性。

在深入D3的选择器API之前,需要先介绍一下W3C的3级选择器API。如果你已经掌握了这部分内容,可以跳过本节。D3的选择器API基于3级选择器(也称CSS3选择器)实现。在这一小节,我们先来了解一些常用的CSS3选择器语法。

◆ #foo:选中id为foo的元素

◆ foo:选中foo 标签元素。

◆ .foo:选中所有class为foo的元素

◆ [foo=goo] :选中所有属性foo的值为goo的元素

◆ foogoo:选中foo元素内的goo子元素。

◆ foo#goo:选中id为goo 的foo元素。

◆ foo.goo:选中class为goo的foo 元素。

◆ foo:first-child:foo 元素的第一个子元素。

//<--选中这一个

◆ foo:nth-child(n):foo元素的第n个子元素。

//<--foo:nth-child(2)

//<--foo:nth-child(3)

CSS3选择器是一个复杂的话题。这里只列出有助于理解和掌握D3的一些常用选择器,更多信息请访问 W3C 第 3 级选择器 API 官方文档`` http://www. w3.org/TR/css3-selectors/``。

技巧.tif 如果你想要处理的浏览器不支持选择器,则可以尝试在引入D3之前,先引用Sizzle来解决向下兼容的问题。Sizzle的相关资料可参见``http://sizzlejs.com/。W3C``的下一代4级选择器API仍然处于草稿阶段。你可以在此对目前的状态进行预览`` http://dev.w3.org/csswg/selectors4/``。
相关文章
|
11天前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
56 0
|
7月前
|
前端开发 JavaScript
前端基础 - JavaScript简介
前端基础 - JavaScript简介
26 0
|
7月前
|
JavaScript 前端开发 Linux
|
8月前
|
JavaScript 前端开发
JavaScript简介--语句--变量
JavaScript简介--语句--变量
|
11天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
86 0
|
11天前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
39 0
|
11天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(上)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
46 0
|
2天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
7 2
|
11天前
|
JavaScript 前端开发
JavaScript 简介
【5月更文挑战第1天】JavaScript 简介。
7 3
|
11天前
|
JavaScript 前端开发 Java
javaScript简介
javaScript简介