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 通过过渡支持动画。正确使用过渡即可实现动画。过渡是关键帧动画的有限形式，只有两个关键帧:start 和 end。起始关键帧通常是 DOM 的当前状态，而结束关键帧是您指定的一组属性、样式和其他属性。过渡非常适合过渡到新视图，而无需依赖于起始视图的复杂代码。

D3.js API

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

集合 API

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

路径 API

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

轴 API

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

缩放 API

缩放有助于缩放您的内容。您可以使用单击并拖动方法聚焦特定区域。

分隔符分隔值 API

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