# @d3fc/d3fc-data-join 中文文档

规范地址：https://npmcn.com/package/%40d3fc/d3fc-data-join/

版本：6\.0\.3
npm 元数据更新时间：2022-04-05T02:30:53.697Z
中文译文更新时间：2026-11-11T08:01:34.966Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40d3fc/d3fc-data-join
原文对照：https://npmcn.com/package/%40d3fc/d3fc-data-join/?lang=original
项目主页：https://github.com/d3fc/d3fc
源码仓库：https://github.com/d3fc/d3fc

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.3 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：d3-selection \*
- 首次发布：2018-08-02T13:50:35.359Z
- 最新版本发布：2020-09-23T20:31:55.982Z
- 近 30 天下载量：73771（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 0 个）

## 中文简介

简化 D3 数据的组件加入并支持 d3fc 装饰模式

## 安装

```sh
npm install @d3fc/d3fc-data-join
```

也可以使用：`pnpm add @d3fc/d3fc-data-join`、`yarn add @d3fc/d3fc-data-join`、`bun add @d3fc/d3fc-data-join`

## README

# d3fc-数据连接

环绕 D3 数据的一圈,简化了 遇到的一些共同问题 _我们的特殊使用模式_,并便利 _d3fc 装饰_ 模式。 这些标准不会普遍适用。 与往常一样,理解抽象和在许多情况下加入香草数据可能比较简单或表现更好.

这篇博客文章([有数据连接的构建组件](http://blog.scottlogic.com/2016/08/17/building-components-with-d3-data-join.html)介绍这一构成部分的理由.

[主要 D3FC 软件包](https://github.com/d3fc/d3fc)

## 安装

```bash
npm install @d3fc/d3fc-data-join
```

## API 参考

数据join组件是一个围绕d3所选择的All/data数据-join的相对轻量级包装器,它允许对结果进行装饰. 这是通过在打开前将元素附加到输入选择中来实现的. 默认的淡出/淡出过渡也被隐含地添加,但可以被修改.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin) 页:1.**数据**(\[_元素_\[, _类Name_)

构造一个新的数据连接组件实例。 可选的 `element` 或一个 `element` (单位:千美元) `className` 可以指定,这在功能上相当于调用下文定义的方法.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin_) _数据_(单位:千美元)_选择_\[, _数据_)

使用一个 `selection` 包含父元素和 `data` 将合并.

```js
import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';

const join = dataJoin('li', 'animal');

join(select('ul'), ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);
```

返回值是一个包含所有新和已存在的节点的选项。 为检索只包含新节点的选题,还暴露出另外两种方法(`.enter()`)和被移除的节点(`.exit()`) (中文(简体) ).

```js
import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';

const join = dataJoin('li', 'animal');

const update = join(select('ul'), ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);

update.enter()
  .attr('data-', d => d);

```

若为 `d3-transition` ,新的节点将应用已淡出过渡,而去除的节点将应用已淡出过渡。 过渡时间可以从集装箱选择中或通过明确设置加以控制 [`transition`](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin_transition)。 。 。 .

```js
import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';
import { transition } from 'd3-transition';

const quickTransition = transition()
  .duration(300);

const join = dataJoin('li', 'animal');

const container = select('ul')
  .transition(quickTransition);

join(container, ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);
```

要禁用过渡, 请在传递到 -

```js
import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';
import { transition } from 'd3-transition';

const quickTransition = transition()
  .duration(300);

const join = dataJoin('li', 'animal');

const root = select('body')
  .transition(quickTransition);

const container = root.select('ul')
  .selection();

join(container, ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);
```

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin_element) _数据_。 。 。 .**元素**(单位:千美元)_元素_(中文(简体) )

设置用于选择元素和创建用于插入的元素的元素名称。 默认为 SVG `g` 键。 见 `className` 用于描述所使用的选择器.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin_className) _数据_。 。 。 .**类Name**(单位:千美元)_类Name_(中文(简体) )

设置用于选择元素并应用到插入元素的类名。 默认为 `null`如果设置为 `null`,仅指 `element` 用作选择器。 如果非无,则选择器提供给 `selectAll` 这是 -

```js
`${element}.${className}`
```

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin_key) _数据_。 。 。 .**键**(单位:千美元)_密钥_(中文(简体) )

指定数据连接所用的关键函数。 基于索引的默认值 。 相当于指定 `key` 调用时的参数 [`selection.data()`](https://github.com/d3/d3-selection#selection_data)。 。 。 .

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-data-join/#readme-dataJoin_transition) _数据_。 。 。 .**过渡**(单位:千美元)_过渡_(中文(简体) )

指定未作为容器提供暗中过渡时使用的过渡。 默认为 `null` 用于禁用过渡.

## 常见问题

### @d3fc/d3fc-data-join 是什么？

简化 D3 数据的组件加入并支持 d3fc 装饰模式

### 如何安装 @d3fc/d3fc-data-join？

在项目目录运行 npm install @d3fc/d3fc-data-join，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：d3-selection（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @d3fc/d3fc-data-join 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/d3fc\_\_d3fc-data-join 是否存在。

### @d3fc/d3fc-data-join 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @d3fc/d3fc-data-join 可以商用吗？

@d3fc/d3fc-data-join 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @d3fc/d3fc-data-join 的下载量有多少？

根据 npm 官方下载统计，@d3fc/d3fc-data-join 在 2026/10/11 – 2026/11/09 这 30 天内被下载 73,771 次，日均约 2,459 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @d3fc/d3fc-data-join 还在维护吗？

最新版本 6\.0\.3 发布于 2020/09/24（6 年前）；至今共发布 17 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。