D3.js 的概念

D3.js 是一个 JavaScript 库，开源，包含以下一些基本概念：

• 操作 DOM（文档对象模型）的数据驱动。
• 用图形和数据实现。
• 为地理、网络、层次结构和线性数据布局可视化组件。
• 在 UI（用户界面）状态之间实现有效的过渡。
• 实现流畅的用户交互。

D3.js 的 Web 标准

在使用 D3.js 进行可视化之前，我们需要了解一些 Web 标准。在 D3.js 中，可以使用一些基本 Web 标准，如下所示

• HTML（超文本标记语言）
• DOM（文档对象模型）
• CSS（层叠样式表）
• SVG（可缩放矢量图形）
• JavaScript

让我们逐步详细探讨和讨论上述 Web 标准。

1. HTML（超文本标记语言）

超文本标记语言（HTML）可用于构建任何网页的内容。HTML 存储在带有 ".html" 扩展名的文本文件中。

让我们考虑一个例子。

示例

HTML 的经典基本示例如下所示

2. DOM（文档对象模型）

如果通过浏览器加载任何 HTML 页面，它将被转换为任何层次结构。HTML 中的所有标签都会转换为 DOM 中的对象/元素，并带有父子关系。此方法使我们的 HTML 在逻辑上结构化。当 DOM 形成时，它将有效地使用（删除/修改/添加）页面上的组件。

让我们借助 HTML 文档来理解和解释 DOM，如下所示

HTML 文档的文档对象模型（DOM）如下所示

3. CSS（层叠样式表）

各种 CSS 样式可以使任何网页更具风格，而 HTML 为任何网页提供了结构。CSS（层叠样式表）是一种样式表语言，用于指定用 XML（包括 XML 的方言，如 XHTML 或 SVG）或 HTML 编写的文档的呈现。 CSS 指定了组件必须如何在任何网页上呈现。

4. SVG（可缩放矢量图形）

可缩放矢量图形 (SVG) 用于在网页上呈现图像。尽管它用于使用文本制作图像，但它不是任何直接的图像。它是可缩放矢量，正如其名称所定义的那样。它可以根据浏览器的大小进行缩放；因此，浏览器的调整大小不会改变图像。每个浏览器都可以支持 SVG，但不包括 IE8 及更低版本。数据可视化用于视觉表示。使用 D3.js 应用 SVG 来传递可视化将非常方便。

假设 SVG 就像我们可以绘制不同形状的画布。因此，首先，让我们创建一个 SVG 标签，如下所示

SVG 使用像素作为默认测量值，因此当单位是任何像素时，我们不需要描述。如果我们想绘制任何矩形，我们可以使用以下代码进行绘制

我们可以使用 SVG 绘制另一个形状，例如路径、文本、椭圆、圆和线。

与设计 HTML 元素类似，设置 SVG 元素的样式非常简单。让我们将矩形的背景颜色设置为您想要的任何颜色。我们需要插入一个“fill”属性，并描述像红色这样的值，如下所示

5. JavaScript

JavaScript 语言是客户端的任何松散类型脚本语言，在用户的浏览器内部实现。此语言与 HTML 元素（DOM 元素）交互，以创建更具交互性的 Web 用户界面。该语言执行 ECMAScript 标准，根据 ECMA-262 的规范添加核心功能。它还添加了其他功能，这些功能并未基于 ECMAScript 标准 进行描述。 JavaScript 的知识是 D3.js 的任何先决条件。