@d3fc/d3fc-annotation

中文文档

3.0.16发布于 2024/07/30MITESM + CJS近 30 天下载 6.2万

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

文档目录22 节

网格注释
SVG 渲染
彩绘
常见属性
SVG 特定属性
Canvas 特定属性
乐队注释
SVG 渲染
彩绘
常见属性
Canvas 特定属性
行注释
SVG 渲染
彩绘
共享组件
Canvas 特定属性
Crosshair 注释
SVG 渲染
彩绘
常见属性
SVG 特定属性
Canvas 特定属性

d3fc 注释

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

主要 D3FC 软件包

安装

npm install @d3fc/d3fc-annotation

API 密码

网格注释

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

SVG 渲染

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1。。。 .注释SvgGridline(a) 与《公约》有关的其他事项

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

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} 页:1。。。 .注释(a) 与《公约》有关的其他事项

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

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} 网格线。。。 .十. 规模(单位:千美元)[标(中文(简体) )

若为缩放 ,设置用于垂直网格线位置(与 x 键) (中文(简体) ). 此外,还有: 范围被作为水平网格线的界限。若为缩放未指定,请返回当前 x 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .比例(单位:千美元)[标(中文(简体) )

若为缩放 ,设置用于水平网格位置(与 yTicks 语句) (中文(简体) ). 此外,还有: 范围被取为垂直网格线的界限。若为缩放未指定,返回当前 y 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .x 键(单位:千美元)[数(中文(简体) )

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .x 键(单位:千美元)[间(中文(简体) )

若为计数指定,设置传递给键当请求水平网格位置时十. 规模是一个连续的缩放。对于其他尺度,该数值被忽略域名直接使用。若为计数未指定,返回当前计数.

何时十. 规模是一个时间尺度此方法可以传递到时间间隔以指定网格线的位置。例如,每15分钟生成网格线:

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .xTickValues 数据(单位:千美元)[数值](中文(简体) )

手动指定垂直网格线位置. 覆盖 x 键。。。 .

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .yTicks 语句(单位:千美元)[数(中文(简体) )

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .yTicks 语句(单位:千美元)[间(中文(简体) )

若为计数指定,设置传递给键当请求垂直网格位置时比例是一个连续的缩放。对于其他尺度,该数值被忽略域名直接使用。若为计数未指定,返回当前计数.

何时比例是一个时间尺度此方法可以传递到时间间隔以指定网格线的位置。例如,每15分钟生成网格线:

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .yTickValues 软件(单位:千美元)[咆哮](中文(简体) )

手动指定垂直网格线位置. 覆盖 yTicks 语句。。。 .

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .十进制(单位:千美元)[装饰Func](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 网格线。。。 .调和(单位:千美元)[装饰Func](中文(简体) )

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

SVG 特定属性

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} svg 线。。。 .x 键(单位:千美元)[钥匙风(中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} svg 线。。。 .键(单位:千美元)[钥匙风(中文(简体) )

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

Canvas 特定属性

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布线。。。 .上下文(单位:千美元)页:1(中文(简体) )

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

乐队注释

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

SVG 渲染

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1。。。 .注释SvgBand(a) 与《公约》有关的其他事项

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

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} 页:1。。。 .笔记(a) 与《公约》有关的其他事项

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

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} 带。。。 .十. 规模(单位:千美元)[标(中文(简体) )

若为缩放 ,设置用于转换发件人编号 :调值垂直带的位置。此外,还有: 范围作为水平带的界限。若为缩放未指定,请返回当前 x 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 带。。。 .比例(单位:千美元)[标(中文(简体) )

若为缩放 ,设置用于转换发件人编号 :调值水平带的位置。此外,还有: 范围被取为垂直带的界限。若为缩放未指定,返回当前 y 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 带。。。 .东方(单位:千美元)[取(中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 带。。。 .发件人(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 带。。。 .调值(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 带。。。 .装饰(单位:千美元)[装饰Func](中文(简体) )

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

Canvas 特定属性

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布屏。。。 .上下文(单位:千美元)页:1(中文(简体) )

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

行注释

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

SVG 渲染

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1。。。 .注释SvgLine(a) 与《公约》有关的其他事项

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

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} 页:1。。。 .注释(a) 与《公约》有关的其他事项

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

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} 线条。。。 .十. 规模(单位:千美元)[标(中文(简体) )

若为缩放 ,设置用于转换价值线条。此外,还有: 范围以横向线为界限。若为缩放未指定,请返回当前 x 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 线条。。。 .比例(单位:千美元)[标(中文(简体) )

若为缩放 ,设置用于转换价值线条。此外,还有: 范围以垂直线为界限。若为缩放未指定,返回当前 y 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 线条。。。 .东方(单位:千美元)[取(中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 线条。。。 .价值(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 线条。。。 .标签(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 线条。。。 .装饰(单位:千美元)[装饰Func](中文(简体) )

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

Canvas 特定属性

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布线。。。 .上下文(单位:千美元)页:1(中文(简体) )

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

Crosshair 注释

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

SVG 渲染

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1。。。 .注释 SvgCrosshair(a) 与《公约》有关的其他事项

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

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} 页:1。。。 .笔记(a) 与《公约》有关的其他事项

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

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} 横线。。。 .十. 规模(单位:千美元)[标(中文(简体) )

若为缩放 ,设置其范围以横向线为界限。若为缩放未指定,请返回当前 x 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 横线。。。 .比例(单位:千美元)[标(中文(简体) )

若为缩放 ,设置其范围以垂直线为界限。若为缩放未指定,返回当前 y 缩放.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 横线。。。 .页:1(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 横线。。。 .尔(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 横线。。。 .x 标签(单位:千美元)[接入方](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 横线。。。 .y 标签(单位:千美元)[接入方](中文(简体) )

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

SVG 特定属性

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} svg Crosshair (英语)。。。 .装饰(单位:千美元)[装饰Func](中文(简体) )

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

Canvas 特定属性

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布Crosshair。。。 .装饰(单位:千美元)[装饰Func](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布Crosshair。。。 .十进制(单位:千美元)[装饰Func](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布Crosshair。。。 .调和(单位:千美元)[装饰Func](中文(简体) )

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

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布Crosshair。。。 .上下文(单位:千美元)页:1(中文(简体) )

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

版本与发布记录

@d3fc/d3fc-annotation 共发布 87 个版本，首次发布于 2018/08/02；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`3.0.16`latest	2024/07/30	2 年前
`3.0.15`	2024/06/17	2 年前
`3.0.14`	2024/06/17	2 年前
`3.0.13`	2024/06/13	2 年前
`3.0.12`	2022/05/31	4 年前
`3.0.11`	2020/09/24	6 年前

关于 @d3fc/d3fc-annotation 的常见问题

@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 和提交记录判断。

npm install @d3fc/d3fc-annotation

pnpmpnpm add @d3fc/d3fc-annotation
yarnyarn add @d3fc/d3fc-annotation
bunbun add @d3fc/d3fc-annotation

peer 依赖d3-scale *d3-selection *

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

61,596

约 6.2万次日均 2,053 次

统计周期 2026/10/11 – 2026/11/09
数据来自 npm 官方下载统计，今天更新

最新版本3.0.16发布于 2 年前

开源许可MIT宽松许可

包体积114 kB22 个文件 · 解压后

运行依赖4 个另有 2 个 peer 依赖

模块格式ESM + CJS

TypeScript未声明类型可查找 @types/d3fc__d3fc-annotation

发布版本87 个近 12 个月 0 个

首次发布2018/08/028 年前

元数据更新2024/07/30

每一个软件包背后，
都有分享与创造的人。