# @d3fc/d3fc-axis 中文文档

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

版本：3\.0\.7
npm 元数据更新时间：2024-06-13T14:55:09.413Z
中文译文更新时间：2026-11-11T08:06:10.172Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：31.1 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：d3-scale \*，d3-selection \*，d3-shape \*
- 首次发布：2018-08-02T13:52:33.157Z
- 最新版本发布：2024-06-13T14:55:09.161Z
- 近 30 天下载量：65169（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 0 个）

## 中文简介

D3 轴的倒置替换, 支持 d3fc 装饰模式

## 安装

```sh
npm install @d3fc/d3fc-axis
```

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

## README

# d3fc-轴

D3轴的倒置替换,支持D3FC装饰图案,改进了平面平面的布局选项,并自动标签旋转/重新定位.

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

## 安装

```bash
npm install @d3fc/d3fc-axis
```

## API 参考

### API 概况

这是替补 [d3轴](https://github.com/d3/d3-axis),因此,请参见该项目的详细文件 - 所有d3轴属性和特征都得到本部分的支持。 新增了几处地产,如下文所记载.

#### 选中和标签布局选项

#### 居中标签

当渲染一个与线性尺度相联的轴时,轴的默认行为是使每个勾选下方的标签被渲染出. 这往往最有意义,标签上注明了比例尺上的具体实例.

然而,在某些情况下,标签可能指一系列数据。 例如,在时间尺度上,"星期一"指的是一个时间范围,而不是一个时间范围的例子. 因此,使这个标签在勾痕之间变得更有意义.

以 D3FC 为轴, 设置 `tickCenterLabel` 改为 `true` 将在勾选标记之间使标签折成相去相去甚远 :

```javascript
const linear = d3.scaleTime()
  .domain([new Date('2019-03-02'), new Date('2019-03-07')])
  .range([0, 400]);

const axis = fc.axisBottom(linear)
  .tickArguments([5])
  .tickCenterLabel(true);
```

![](https://d3fc.io/examples/axis-center/screenshot.png)

##### 带宽

带状平面常被用来渲染带有绝对维度的图表. 使用 D3 轴,勾和标签在每个栏/列的中心点提供. 然而,使每个行/ 分类之间的边界上的勾选更有意义.

D3FC正弦轴是一种倒置的替换,它使条/列中心点的标签和边框的勾选:

```javascript
const vegetableScale = d3.scaleBand()
  .domain(['Carrots', 'Bananas', 'Sausages', 'Pickles'])
  .paddingInner(0.1)
  .paddingOuter(0.1)
  .range([0, width]);

const barSeries = fc.autoBandwidth(fc.seriesSvgBar())
  .align('left')
  .crossValue(x => x.veg)
  .mainValue(x => x.qty)
  .xScale(vegetableScale)
  .yScale(qtyScale);

// this is the D3FC ordinal axis
const axis = fc.axisOrdinalBottom(scale);

// render the above components to SVG ...
var svg = d3.select('body').append('svg')
...
```

![](https://npmcn.com/package/%40d3fc/d3fc-axis/screenshots/ordinal.png)

#### 标签旋转/ 相抵

与 D3 轴相通,如果勾选标记太相近,它们的相通标签可能相通. 使用 D3FC 可以对轴子应用适配器来自动移动/旋转标签来避免相撞.

以下是轴标签重叠的简单例子:

```javascript
const foodScale = d3.scaleBand()
    .domain(['Carrots', 'Bananas', 'Sausages', 'Pickles', 'Aubergines', 'Artichokes', 'Spinach', 'Cucumber'])
    .range([10, 290]);

const axis = fc.axisOrdinalBottom(foodScale);

d3.select('svg')
    .call(axis);
```

通过应用一个适配器可以避免重叠,例如您可以应用 `axisLabelRotate` 适配器如下:

```javascript
const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(foodScale));
```

每次使轴使这个适配器测量标签并决定是否需要旋转来避免相撞. 以此为例,轴使:

![](https://d3fc.io/examples/axis-rotate-decorate/screenshot.png)

#### 装饰图案

执行装饰图案的组件暴露于 `decorate` 属性,通过该属性,数据结合用于构建组件的 DOM 选择。 这使得组件的用户可以在输入,更新和退出选择中添加额外的逻辑.

详情请查阅 [装饰图案文档](https://d3fc.io/introduction/decorate-pattern.html)。 。 。 .

在下面的例子中,绑定在每个勾选上的值用于给值大于或等于100的颜色:

```javascript
const scale = d3.scaleLinear()
  .domain([0, 140])
  .range([0, 400])
  .nice();

const axis = fc.axisBottom(scale)
  .decorate((s) =>
    s.enter()
      .select('text')
      .style('fill', function(d) {
          return d >= 100 ? 'red' : 'black';
      });
  );
```

![](https://d3fc.io/examples/axis-color/screenshot.png)

### 轴

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisBottom) 页:1.**轴控**(a) 与《公约》有关的其他事项 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisTop) 页:1.**轴Top**(a) 与《公约》有关的其他事项 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisLeft) 页:1.**轴向左**(a) 与《公约》有关的其他事项 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisRight) 页:1.**轴向右**(a) 与《公约》有关的其他事项

D3 轴的倒置替换,见 [API 参考的 D3 文件](https://github.com/d3/d3-axis#api-reference)。 。 。 .

### 常态轴

![](https://d3fc.io/examples/axis-band-scale/screenshot.png)

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisOrdinalBottom) 页:1.**坐标轴**(a) 与《公约》有关的其他事项 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisOrdinalTop) 页:1.**轴正弦Top**(a) 与《公约》有关的其他事项 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisOrdinalLeft) 页:1.**轴向正弦左**(a) 与《公约》有关的其他事项 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisOrdinalRight) 页:1.**轴正弦右**(a) 与《公约》有关的其他事项

D3 轴的倒置替换,见 [API 参考的 D3 文件](https://github.com/d3/d3-axis#api-reference)。 。 。 .

### 轴标签偏移

![](https://d3fc.io/examples/axis-offset/screenshot.png)

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisLabelOffset) 页:1.**坐标**(单位:千美元)_轴_(中文(简体) )

为避免相撞而抵消轴标签的适配器.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisLabelOffset_labelOffsetDepth) _轴_。 。 。 .**标签对象深度**(单位:千美元)_页:1_(中文(简体) )

若为 _页:1_ ,设置相向深度并返回此序列。 若为 _页:1_ 未指定,返回当前偏移深度.

若为 _页:1_ 设置为 `auto`,适配器将确定需要由标签所抵消的需要的抵消深度(即级别数)来避免相撞. 若为 _页:1_ 设置为数字,它将被给定的深度抵消标签.

### 轴标签旋转

![](https://d3fc.io/examples/axis-rotate-decorate/screenshot.png)

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisLabelRotate) 页:1.**轴标签旋转**(单位:千美元)_轴_(中文(简体) )

一个为避免相撞而旋转轴标签的适配器.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-axis/#readme-axisLabelRotate_labelRotate) _轴_。 。 。 .**标签旋转**(单位:千美元)_学位_(中文(简体) )

若为 _学位_ 中指定旋转角。 若为 _学位_ 未指定,返回当前旋转角度.

若为 _学位_ 设置为 `auto`,适配器将确定标签是否重叠,然后旋转来避免相撞. 视现有空间而定,角会从相当浅的,一直到90度不等. 若为 _学位_ 设置为数字,它将按给定角度旋转标签.

## 常见问题

### @d3fc/d3fc-axis 是什么？

D3 轴的倒置替换, 支持 d3fc 装饰模式

### 如何安装 @d3fc/d3fc-axis？

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

### @d3fc/d3fc-axis 支持 TypeScript 吗？

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

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

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

### @d3fc/d3fc-axis 可以商用吗？

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

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

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

### @d3fc/d3fc-axis 还在维护吗？

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