DC.js D3.js 简介

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

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

让我们了解一下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

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

路径 API

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

轴 API

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

缩放 API

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

分隔符分隔值 API

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