# @d3fc/d3fc-annotation 中文文档

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

版本：3\.0\.16
npm 元数据更新时间：2024-07-30T09:41:23.282Z
中文译文更新时间：2026-11-11T08:09:26.815Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：114 kB，22 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：d3-scale \*，d3-selection \*
- 首次发布：2018-08-02T13:57:32.574Z
- 最新版本发布：2024-07-30T09:41:23.033Z
- 近 30 天下载量：61596（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：87（近 12 个月 0 个）

## 中文简介

用于向 SVG 渲染地块区域说明的 D3 组件集, 包括线路、 横发、 网格线等

## 安装

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

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

## README

# d3fc 注释

使用 SVG 和画布将绘图区域说明(波段、横发、网格线和线)绘制到笛卡尔图表的组件集.

<table><tbody><tr><td><a href="https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline" rel="nofollow noopener noreferrer"><img src="https://d3fc.io/examples/annotation-canvas-gridline/screenshot.png" loading="lazy" decoding="async" referrerpolicy="no-referrer"></a></td><td><a href="https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair" rel="nofollow noopener noreferrer"><img src="https://d3fc.io/examples/annotation-canvas-crosshair/screenshot.png" loading="lazy" decoding="async" referrerpolicy="no-referrer"></a></td></tr><tr><td><a href="https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band" rel="nofollow noopener noreferrer"><img src="https://d3fc.io/examples/annotation-canvas-band/screenshot.png" loading="lazy" decoding="async" referrerpolicy="no-referrer"></a></td><td><a href="https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line" rel="nofollow noopener noreferrer"><img src="https://d3fc.io/examples/annotation-canvas-line/screenshot.png" loading="lazy" decoding="async" referrerpolicy="no-referrer"></a></td></tr></tbody></table>

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

# 安装

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

# API 密码

## 网格注释

网格线组件使横向和纵向网格线.

### SVG 渲染

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline) _页:1_。 。 。 .**注释SvgGridline**(a) 与《公约》有关的其他事项

构造一个新的 SVG 网格线注释组件。 构建后, 将组件配置为天平, 并将其调用到一个选择上 -

```js
const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const gridline = fc.annotationSvgGridline()
  .xScale(xScale)
  .yScale(yScale);

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

### 彩绘

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_canvas) _页:1_。 。 。 .**注释**(a) 与《公约》有关的其他事项

构造一个新的帆布网格注释组件。 构建后,将组件配置为天平并称为 -

```js
var ctx = canvas.getContext('2d');

const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const gridline = fc.annotationCanvasGridline()
  .xScale(xScale)
  .yScale(yScale)
  .context(ctx);

gridline();
```

### 常见属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xScale) _网格线_。 。 。 .**十. 规模**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置用于垂直网格线位置(与 [x 键](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xTicks)) (中文(简体) ). 此外,还有: [范围](https://github.com/d3/d3-scale#continuous_range) 被作为水平网格线的界限。 若为 _缩放_ 未指定,请返回当前 x 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yScale) _网格线_。 。 。 .**比例**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置用于水平网格位置(与 [yTicks 语句](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yTicks)) (中文(简体) ). 此外,还有: [范围](https://github.com/d3/d3-scale#continuous_range) 被取为垂直网格线的界限。 若为 _缩放_ 未指定,返回当前 y 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xTicks) _网格线_。 。 。 .**x 键**(单位:千美元)_\[数_(中文(简体) )

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xTicks) _网格线_。 。 。 .**x 键**(单位:千美元)_\[间_(中文(简体) )

若为 _计数_ 指定,设置传递给 [键](https://github.com/d3/d3-scale#continuous_ticks) 当请求水平网格位置时 [十. 规模](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xScale) 是一个连续的缩放。 对于其他尺度,该数值被忽略 [域名](https://github.com/d3/d3-scale#ordinal_domain) 直接使用。 若为 _计数_ 未指定,返回当前计数.

何时 [十. 规模](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xScale) 是一个 [时间尺度](https://github.com/d3/d3-scale#scaleTime) 此方法可以传递到 [时间间隔](https://github.com/d3/d3-time) 以指定网格线的位置。 例如,每15分钟生成网格线:

```
gridline.xTicks(d3.timeMinute.every(15));
```

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

手动指定垂直网格线位置. 覆盖 [x 键](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xTicks)。 。 。 .

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yTicks) _网格线_。 。 。 .**yTicks 语句**(单位:千美元)_\[数_(中文(简体) )

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yTicks) _网格线_。 。 。 .**yTicks 语句**(单位:千美元)_\[间_(中文(简体) )

若为 _计数_ 指定,设置传递给 [键](https://github.com/d3/d3-scale#continuous_ticks) 当请求垂直网格位置时 [比例](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yScale) 是一个连续的缩放。 对于其他尺度,该数值被忽略 [域名](https://github.com/d3/d3-scale#ordinal_domain) 直接使用。 若为 _计数_ 未指定,返回当前计数.

何时 [比例](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yScale) 是一个 [时间尺度](https://github.com/d3/d3-scale#scaleTime) 此方法可以传递到 [时间间隔](https://github.com/d3/d3-time) 以指定网格线的位置。 例如,每15分钟生成网格线:

```
gridline.yTicks(d3.timeMinute.every(15));
```

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yTickValues) _网格线_。 。 。 .**yTickValues 软件**(单位:千美元)_\[咆哮\]_(中文(简体) )

手动指定垂直网格线位置. 覆盖 [yTicks 语句](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yTicks)。 。 。 .

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_xDecorate) _网格线_。 。 。 .**十进制**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置将垂直网格线加入SVG元素或绘制帆布网格线时使用的装饰功能。 如果没有指定,则返回当前装饰功能.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-gridline_yDecorate) _网格线_。 。 。 .**调和**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置在将水平网格线连接到SVG元素或绘制帆布网格线时使用的装饰功能。 如果没有指定,则返回当前装饰功能.

### SVG 特定属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-svgGridline_xKey) _svg 线_。 。 。 .**x 键**(单位:千美元)_\[钥匙风_(中文(简体) )

若为 _密钥_ ,设置将垂直网格线连接到 SVG 元素时所使用的关键函数。 如果没有指定,则返回当前的关键函数.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-svgGridline_yKey) _svg 线_。 。 。 .**键**(单位:千美元)_\[钥匙风_(中文(简体) )

若为 _密钥_ ,设置在将水平网格线连接到 SVG 元素时使用的密钥函数。 如果没有指定,则返回当前的关键函数.

### Canvas 特定属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvasGridline_context) _画布线_。 。 。 .**上下文**(单位:千美元)_页:1_(中文(简体) )

若为 _页:1_ ,设置画布上下文并返回此序列。 若为 _页:1_ 未指定,返回当前上下文.

## 乐队注释

频段组件使横向和纵向频段.

### SVG 渲染

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band) _页:1_。 。 。 .**注释SvgBand**(a) 与《公约》有关的其他事项

构造一个新的带注释组件。 构建后,将组件配置为天平,将选择与代表波段位置的一些数据联系起来,并在选择时调用 -

```js
const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const band = fc.annotationSvgBand()
  .xScale(xScale)
  .yScale(yScale);

d3.select('svg')
  .datum([{ from: 45, to: 55 }])
  .call(band);
```

### 彩绘

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_canvas) _页:1_。 。 。 .**笔记**(a) 与《公约》有关的其他事项

构造一个新的带注释组件。 构建后, 将组件配置为平面并调用代表波段位置的一些数据 -

```js
var ctx = canvas.getContext('2d');

const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const band = fc.annotationCanvasBand()
  .xScale(xScale)
  .yScale(yScale)
  .context(ctx);

band([{ from: 45, to: 55 }]);
```

### 常见属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_xScale) _带_。 。 。 .**十. 规模**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置用于转换 [发件人](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_fromValue)编号 :[调值](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_toValue) 垂直带的位置。 此外,还有: [范围](https://github.com/d3/d3-scale#continuous_range) 作为水平带的界限。 若为 _缩放_ 未指定,请返回当前 x 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_yScale) _带_。 。 。 .**比例**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置用于转换 [发件人](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_fromValue)编号 :[调值](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_toValue) 水平带的位置。 此外,还有: [范围](https://github.com/d3/d3-scale#continuous_range) 被取为垂直带的界限。 若为 _缩放_ 未指定,返回当前 y 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_orient) _带_。 。 。 .**东方**(单位:千美元)_\[取_(中文(简体) )

若为 _方向_ 指定边框的方向 `horizontal` 或者说 `vertical`如果 _方向_ 未指定,返回当前方向.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_fromValue) _带_。 。 。 .**发件人**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于获取频段起始值的函数。 这个数值将经过适当的尺度。 如果没有指定,请返回当前起始值.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_toValue) _带_。 。 。 .**调值**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于获取波段终端值的函数。 这个数值将经过适当的尺度。 如果没有指定,则返回当前终端值.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-band_decorate) _带_。 。 。 .**装饰**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置在加入带到 SVG 元素或绘制画布时使用的装饰功能。 如果没有指定,则返回当前装饰功能.

### Canvas 特定属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvasBand_context) _画布屏_。 。 。 .**上下文**(单位:千美元)_页:1_(中文(简体) )

若为 _页:1_ ,设置画布上下文并返回此序列。 若为 _页:1_ 未指定,返回当前上下文.

## 行注释

该线段构成水平线和垂直线.

### SVG 渲染

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line) _页:1_。 。 。 .**注释SvgLine**(a) 与《公约》有关的其他事项

构造一个新的行注释组件。 构建后,将组件配置为天平,将选择与代表行位置的一些数据联系起来,并在选择时调用 -

```js
const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const line = fc.annotationSvgLine()
  .xScale(xScale)
  .yScale(yScale);

d3.select('svg')
  .datum([50])
  .call(line);
```

### 彩绘

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_canvas) _页:1_。 。 。 .**注释**(a) 与《公约》有关的其他事项

构造一个新的行注释组件。 构建后,用天平配置组件,并用代表行位的一些数据调用它 -

```js
var ctx = canvas.getContext('2d');

const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const line = fc.annotationCanvasLine()
  .xScale(xScale)
  .yScale(yScale)
  .context(ctx);

line([50]);
```

### 共享组件

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_xScale) _线条_。 。 。 .**十. 规模**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置用于转换 [价值](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_value) 线条。 此外,还有: [范围](https://github.com/d3/d3-scale#continuous_range) 以横向线为界限。 若为 _缩放_ 未指定,请返回当前 x 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_yScale) _线条_。 。 。 .**比例**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置用于转换 [价值](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_value) 线条。 此外,还有: [范围](https://github.com/d3/d3-scale#continuous_range) 以垂直线为界限。 若为 _缩放_ 未指定,返回当前 y 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_orient) _线条_。 。 。 .**东方**(单位:千美元)_\[取_(中文(简体) )

若为 _方向_ 指定线条的取向 `horizontal` 或者说 `vertical`如果 _方向_ 未指定,返回当前方向.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_value) _线条_。 。 。 .**价值**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于获取行值的函数。 这个数值将经过适当的尺度。 如果没有指定,则返回当前值.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_label) _线条_。 。 。 .**标签**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于取回行标签的函数。 如果没有指定,请返回当前标签.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-line_decorate) _线条_。 。 。 .**装饰**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置连接到 SVG 元素的行或绘制画布上的行时使用的装饰函数。 如果没有指定,则返回当前装饰功能.

### Canvas 特定属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvasLine_context) _画布线_。 。 。 .**上下文**(单位:千美元)_页:1_(中文(简体) )

若为 _页:1_ ,设置画布上下文并返回此序列。 若为 _页:1_ 未指定,返回当前上下文.

## Crosshair 注释

横纹部分使一对垂直和水平线以点为中心.

### SVG 渲染

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair) _页:1_。 。 。 .**注释 SvgCrosshair**(a) 与《公约》有关的其他事项

构造一个新的横线注释组件。 构建后,将组件配置为天平,将一个选择与一些代表横线位置的数据联系起来,并在选择时调用 -

```js
const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const crosshair = fc.annotationSvgCrosshair()
  .xScale(xScale)
  .yScale(yScale);

d3.select('svg')
  .datum([{x: 50, y: 50}])
  .call(crosshair);
```

### 彩绘

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_canvas) _页:1_。 。 。 .**笔记**(a) 与《公约》有关的其他事项

构造一个新的横线注释组件。 构建后,将组件配置为平面并调用一些代表横线位置的数据-

```js
var ctx = canvas.getContext('2d');

const xScale = d3.scaleLinear()
  .range([0, 100]);

const yScale = d3.scaleLinear()
  .range([0, 100]);

const crosshair = fc.annotationCanvasCrosshair()
  .xScale(xScale)
  .yScale(yScale)
  .context(ctx);

crosshair([{x: 50, y: 50}]);
```

### 常见属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_xScale) _横线_。 。 。 .**十. 规模**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置其 [范围](https://github.com/d3/d3-scale#continuous_range) 以横向线为界限。 若为 _缩放_ 未指定,请返回当前 x 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_yScale) _横线_。 。 。 .**比例**(单位:千美元)_\[标_(中文(简体) )

若为 _缩放_ ,设置其 [范围](https://github.com/d3/d3-scale#continuous_range) 以垂直线为界限。 若为 _缩放_ 未指定,返回当前 y 缩放.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_x) _横线_。 。 。 .**页:1**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ 指定,设置用于取回十字架 X 位置的函数。 注:该数值将 **没有** 通过适当的尺度。 如果没有指定,则返回当前值.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_y) _横线_。 。 。 .**尔**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于取回横断层 y 位置的函数。 注:该数值将 **没有** 通过适当的尺度。 如果没有指定,则返回当前值.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_xLabel) _横线_。 。 。 .**x 标签**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于取回垂直行标签的函数。 如果没有指定,请返回当前标签.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-crosshair_yLabel) _横线_。 。 。 .**y 标签**(单位:千美元)_\[接入方\]_(中文(简体) )

若为 _访问器Func_ ,设置用于取回水平行标签的函数。 如果没有指定,请返回当前标签.

### SVG 特定属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-svg_crosshair_decorate) _svg Crosshair (英语)_。 。 。 .**装饰**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置将横发连接到 SVG 元素时使用的装饰函数。 如果没有指定,则返回当前装饰功能.

### Canvas 特定属性

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvas_crosshair_decorate) _画布Crosshair_。 。 。 .**装饰**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置在绘制十字花序点时使用的装饰函数。 如果没有指定,则返回当前装饰功能.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvas_crosshair_xdecorate) _画布Crosshair_。 。 。 .**十进制**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ ,设置在绘制横线垂直线时使用的装饰函数。 如果没有指定,则返回当前装饰功能.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvas_crosshair_ydecorate) _画布Crosshair_。 。 。 .**调和**(单位:千美元)_\[装饰Func\]_(中文(简体) )

若为 _装饰Func_ 指定,设置在绘制横线水平线时使用的装饰功能。 如果没有指定,则返回当前装饰功能.

[{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-annotation/#readme-canvas_crosshair_context) _画布Crosshair_。 。 。 .**上下文**(单位:千美元)_页:1_(中文(简体) )

若为 _页:1_ ,设置画布上下文并返回此序列。 若为 _页:1_ 未指定,返回当前上下文.

## 常见问题

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

用于向 SVG 渲染地块区域说明的 D3 组件集, 包括线路、 横发、 网格线等

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

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

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

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

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

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

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

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

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

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

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

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