D3js基础课04：基础知识

D3 代表数据驱动文档。它是由 Mike Bostock 开发的 JavaScript 库，旨在基于数据操作文档，允许用户使用 HTML、SVG、CSS 和 JavaScript 的 web 标准创建丰富的动态可视化。该库非常发达，在数据分析人员和数据可视化专家中非常受欢迎。

Web 网页的文档资源

为了描述 D3 是如何工作的，首先考虑一下我们所说的术语文档是什么意思。网页是位于 web 服务器上的文档集合。web 服务器在万维网上有一个地址，其他计算机可以导航到该地址。当访问者导航到您的地址时，他们的浏览器将请求一个或多个文档。这些文档向他们的浏览器描述要显示什么、如何显示、从何处获取有助于显示的数据，以及何时执行诸如用户单击之类的事件。一个基本的网页可以包含一系列文本文档，这些文档包含为网页结构（HTML）、页面样式（CSS）和添加动态元素（JS）而编写的代码。网页通常会有许多资源，包括图像，数据和其他补充材料，使页面显示和功能正常。

Web Page Documents and Assets

D3 是如何工作的

使用 D3 时，您正在创建和操作 web 文档中的元素。例如，d3.js 库将在页面中找到一个 div 元素，将一个数据集绑定到它，然后根据数据集中的值设置该元素的属性。例如，它可以基于用户单击或数据集中的更改动态更新元素。

D3 确实是数据驱动的；这意味着 web 页面上的更改是由预期要“绑定”的数据生成的。D3 可以处理网页上找到的任何元素，并通过将数据绑定到该元素并相应地设置该元素的属性来修改它。数据驱动文档。例如，D3 可以用于从一个数字数组生成 HTML 表，或者您可以使用相同的数据创建一个交互式条形图，这些数字相同。连接到这些元素的事件允许与数据交互。

这是什么意思？请看一个示例数据集。D3允许将这些数据附加到文档中的元素。

City	# of Rats
Brookline	40
Boston	90
Cambridge	30
Somerville	60

您将发现自己使用的主要元素是 SVG 图形。SVG 是一种基于 XML 的、web 友好的矢量图像格式。它还提供对动画和交互性的支持。SVG 的独特之处在于，SVG 图像的所有行为和组件都可以使用 JavaScript 和 CSS 访问，就像网页中的任何其他元素一样。

How D3 Works

SVG是如何工作的

使用 D3 操作的主要元素类型之一是可伸缩向量图形 SVG。这些页面元素可以位于页面主体中，并且可以像文档对象模型中的任何其他元素一样进行操作。下面显示了 DOM 中三个圆的布局，以及它们在浏览器中的显示方式。

image

带 SVG 的圆圈：基于三个小圆圈的图表，作者：Mike Bostock

image

我们开始吧！

在本练习中，您将创建一个图表，该图表将有助于解释通过数据驱动文档的含义。

添加元素

下面是如何在 DOM 中添加新段落。

更改属性

I'm already here

链式语法

更改属性链接可以帮助您在一行代码中执行多个操作。但是，有时，你需要打破链条，在个别零件上工作。

d3.select("body")
    .append("p")
        .text("Eureka!")

也可以这样写，显然下面的表述方式没有上面的直观。

var body = d3.select("body")
var p = body.append("p")
p.text("Eureka!")

选择器

D3 选择器是先前定义的元素数组，遵循与 CSS 相同的准则。选择过程允许 D3 从文档中选择元素，这样操作符就可以访问元素，告诉他们做一些事情。D3 有 select() 和 selectAll() 方法分别查找单个或多个 DOM 元素。

    
Alpha
    
Beta
    
Gamma

d3.selectAll() 选择文档遍历顺序中的所有匹配元素。

    
Alpha
    
Beta
    
Gamma