DC.js - D3.js 简介

D3.js 是一个 JavaScript 库，用于在浏览器中创建交互式可视化。D3 库允许我们在数据集的上下文中操作网页元素。这些元素可以是 HTML、SVG 或 Canvas 元素，并且可以根据数据集的内容进行引入、删除或编辑。它是一个用于操作 DOM 对象的库。D3.js 可以成为数据探索的有价值的辅助工具。它使您可以控制数据的表示方式，并允许您添加数据交互性。

与其他库相比，D3.js 是首屈一指的框架之一。这是因为；它适用于 Web 和数据可视化，并且具有企业级水平。另一个原因是它具有极大的灵活性，使全球开发人员能够创建许多高级图表。此外，它在很大程度上扩展了其功能。

让我们了解 D3.js 的基本概念，如下所示：

• 选择
• 数据连接
• SVG
• 过渡
• 动画
• D3.js API

让我们详细了解每个概念。

选择

选择是 D3.js 中的核心概念之一。它基于 CSS 选择器概念。那些已经使用并了解 JQuery 的人可以很容易地理解选择。它使我们能够根据 CSS 选择器选择 DOM，然后提供修改或追加和删除 DOM 元素的选项。

数据连接

数据连接是 D3.js 中的另一个重要概念。它与选择一起工作，使我们能够根据数据集（一系列数值）操作 HTML 文档。默认情况下，D3.js 在其方法中优先考虑数据集，并且数据集中每个项目都对应一个 HTML 元素。

SVG

SVG 代表**可缩放矢量图形**。SVG 是一种基于 XML 的矢量图形格式。它提供绘制不同形状的选项，例如线条、矩形、圆形、椭圆形等。因此，使用 SVG 设计可视化效果可以为您提供更多功能和灵活性。

变换

SVG 提供了转换单个 SVG 形状元素或一组 SVG 元素的选项。SVG 变换支持平移、缩放、旋转和倾斜。

过渡

过渡是项目从一种状态更改为另一种状态的过程。D3.js 提供了一个 transition() 方法在 HTML 页面中执行过渡。

动画

D3.js 通过过渡支持动画。动画可以通过正确使用过渡来完成。过渡是关键帧动画的一种有限形式，只有两个关键帧：**开始**和**结束**。起始关键帧通常是 DOM 的当前状态，结束关键帧是您指定的属性、样式和其他属性集。过渡非常适合过渡到新视图，而无需依赖起始视图的复杂代码。

D3.js API

让我们简要了解一些重要的 D3.js API 方法。

集合 API

集合只是一个将多个元素组合成一个单元的对象。它也称为容器。它包含对象、映射、集合和嵌套。

路径 API

路径用于绘制矩形、圆形、椭圆形、折线、多边形、直线和曲线。SVG 路径表示可以描边、填充、用作剪裁路径或所有三种组合的形状轮廓。

轴 API

D3.js 提供了绘制轴的功能。轴由线条、刻度和标签组成。轴使用比例尺，因此每个轴都需要赋予一个比例尺才能使用。

缩放 API

缩放有助于缩放内容。您可以使用点击和拖动方法专注于特定区域。

分隔符分隔值 API

分隔符是由一个或多个字符组成的序列，用于指定纯文本或其他数据中独立区域之间的边界。字段分隔符是逗号分隔值的序列。简而言之，分隔符分隔值是逗号分隔值 (CSV) 或制表符分隔值 (TSV)。