DC.js - D3.js 简介

D3.js 是一个 JavaScript 库，用于在浏览器中创建交互式可视化效果。D3 库允许我们在数据集的上下文中操作网页的元素。这些元素可以是 HTML、SVG 或 Canvas 元素，并且可以根据数据集的内容引入、删除或编辑。它是一个用于操作 DOM 对象的库。D3.js 可以为数据探索提供宝贵的帮助。它使您能够控制数据的表示形式并允许您添加数据交互性。

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

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

选集
数据连接
静止无功发生器
过渡
动画片
D3.js API

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

选集

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

数据连接

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

静止无功发生器

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)。