D3.js 中的数据连接

D3.js 具有另一个基本概念，即数据连接。它通过选择实现，并支持我们为数据集（数值集合）利用 HTML 文档。默认情况下，D3.js 在数据集中的每个组件内提供**最高优先级的数据集**，该数据集与 HTML 文档及其方法相关。 此外，我们将详细了解数据连接的概念。

什么是数据连接？

D3.js 的概念支持我们根据 HTML 现有文档内的数据集来**删除、修改**和**注入**项目（HTML 项目和 SVG 项目）。 默认情况下，数据集中每个数据元素都与文档中的一个项目（图形）相关联。

我们知道，当任何数据集修改时，相关的项目也可能被快速使用。 数据连接在文档的图形项目和我们的数据之间建立了紧密的联系。 数据连接使得项目的操作（基于数据集）变得简单直接。

它是如何工作的？

数据连接的主要目标是将现有文档中的项目映射到任何提供的数据集内。 数据连接可以根据提供的数据集构建文档的虚拟表示。它提供了与虚拟表示一起执行的技术。

让我们了解一下下面显示的一般数据

以上数据集包含五个项目，因此它可以与文档的五个组件相关联。

让我们使用选择器的 selectAll() 方法和数据连接的 data() 方法将其映射到文档的 <li> 标签。

HTML

D3.js 的代码

这里有五个作为虚拟项目的文档。 前两个虚拟项目是文档中的任何两个 <li> 项目，如下所示

我们可以对 <li> 的前两个项目应用每个选择器更改技术，例如 text()、style() 和 attr()，如下所示

text() 方法中的函数可以用于获取 <li> 项目的映射数据。 在上面的代码中，d 定义了第一个 <li> 项目的 10 和第二个 <li> 项目的 20。

剩余的三个项目可以与任何项目映射。 这可以通过数据连接的 enter() 方法和选择器的 append() 方法来实现。 enter() 允许我们访问任何剩余数据（未与现有项目映射），而 append() 提供了从相关数据制作任何新项目的设施。

让我们为剩余数据制作 <li> 元素。 数据映射可以如下所示

制作新的 <li> 项目的代码如下所示

数据连接提供了另一种技术，称为 exit() 方法，用于处理从数据集中动态删除的数据元素，如下所示

我们使用 remove() 和 exit() 方法从上述数据集中删除了第 4^个 元素，以及相关的 <li>。

整个代码可以如下所示

示例

输出

删除第五个项目后 -