# @d3fc/d3fc-shape 中文文档 规范地址：https://npmcn.com/package/%40d3fc/d3fc-shape/ 版本：6\.0\.1 npm 元数据更新时间：2022-04-05T02:30:56.724Z 中文译文更新时间：2026-11-11T08:04:05.944Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40d3fc/d3fc-shape 原文对照：https://npmcn.com/package/%40d3fc/d3fc-shape/?lang=original 项目主页：https://github.com/d3fc/d3fc 源码仓库：https://github.com/d3fc/d3fc ## 关键信息（来自 npm 元数据） - 包体积（解压后）：335 kB，19 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：d3-path \* - 首次发布：2018-08-02T13:51:24.238Z - 最新版本发布：2020-07-14T14:28:42.984Z - 近 30 天下载量：68956（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：23（近 12 个月 0 个） ## 中文简介 用于创建图表序列的 SVG/ Canvas 路径生成器集合 ## 安装 ```sh npm install @d3fc/d3fc-shape ``` 也可以使用：`pnpm add @d3fc/d3fc-shape`、`yarn add @d3fc/d3fc-shape`、`bun add @d3fc/d3fc-shape` ## README # d3fc-形状 用于创建图表序列的 SVG/ Canvas 路径生成器集合 [主要 D3FC 软件包](https://github.com/d3fc/d3fc) ## 安装 ```bash npm install @d3fc/d3fc-shape ``` ## API 参考 - [示例用途](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-example-usage) - [栏](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-bar) - [框图](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-boxplot) - [烛台](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-candlestick) - [错误栏](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-error-bar) - [美国](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-ohlc) 所有被输出的功能都有相同的签名, `(context) => generator`. 提供的背景必须是执行由下列机构执行的一组背景2D方法: [d3 路径](https://github.com/d3/d3-path) (或确实是一个背景2D!). 然后可以配置 `generator` 采用相关方法(例如:. `generator.x(/* ... */)`页:1 一旦适当配置后,会以所需的数据(例如:. `generator([/* ... */])`) (中文(简体) ). ### 示例用途 #### 特别工作组 ```javascript import { path } from 'd3-path'; import { shapeCandlestick } from 'd3fc-shape'; const ctx = path(); const candlestick = shapeCandlestick() .x((d, i) => i) .open((d) => d.open) .high((d) => d.high) .low((d) => d.low) .close((d) => d.close); d3.select('path') .datum([ { open: 4, high: 5, low: 3, close: 3 } ]) .attr('d', candlestick); ``` #### 帆布 ```javascript import { shapeCandlestick } from 'd3fc-shape'; const ctx = document.querySelector('canvas').getContext('2d'); const candlestick = shapeCandlestick() .context(ctx) .x((d, i) => i) .open((d) => d.open) .high((d) => d.high) .low((d) => d.low) .close((d) => d.close); candlestick([ { open: 4, high: 5, low: 3, close: 3 } ]); ctx.stroke(); ``` ### 栏 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar) 页:1.**形状栏**(单位:千美元)_上下文_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar_x) _形状栏_。 。 。 .**页:1**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar_y) _形状栏_。 。 。 .**尔**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar_width) _形状栏_。 。 。 .**宽度**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar_height) _形状栏_。 。 。 .**高度**(单位:千美元)_访问器Func_(中文(简体) ) 用于设置条形图访问数据的方式的属性存取器方法. 这个 `accessorFunc(datum, index)` 函数被调用到每个数据项上,返回 与该项目相关属性有关的数值. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar_horizontalAlign) _形状栏_。 。 。 .**水平对齐**(单位:千美元)_对齐_(中文(简体) ) `alignment` 这是: `left`, (中文(简体) ), `right` 或者说 `center` (默认) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBar_verticalAlign) _形状栏_。 。 。 .**垂直对齐**(单位:千美元)_对齐_(中文(简体) ) `alignment` 这是: `bottom`, (中文(简体) ), `top` 或者说 `center` (默认) ### 框图 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot) 页:1.**形状框绘图**(单位:千美元)_上下文_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_value) _形状框绘图_。 。 。 .**价值**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_median) _形状框绘图_。 。 。 .**中位数**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_upperQuartile) _形状框绘图_。 。 。 .**上等号**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_lowerQuartile) _形状框绘图_。 。 。 .**下方位数**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_high) _形状框绘图_。 。 。 .**高级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_low) _形状框绘图_。 。 。 .**低级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_width) _形状框绘图_。 。 。 .**宽度**(单位:千美元)_访问器Func_(中文(简体) ) 用于设置条形图访问数据的方式的属性存取器方法. 这个 `accessorFunc(datum, index)` 函数被调用到每个数据项上,返回 与该项目相关属性有关的数值. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_cap) _形状框绘图_。 。 。 .**上限**(单位:千美元)_访问器Func_(中文(简体) ) 这个 `accessorFunc(item, index)` 函数被调用到每个数据项上,返回 页:1 **推波助澜** 的框宽度. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeBoxPlot_orient) _形状框绘图_。 。 。 .**东方**(单位:千美元)_方向_(中文(简体) ) 图表的方向 。 无论是 `horizontal` (违约)或 `vertical` ### 烛台 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick) 页:1.**形状**(单位:千美元)_上下文_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick_x) _形状_。 。 。 .**页:1**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick_open) _形状_。 。 。 .**打开**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick_high) _形状_。 。 。 .**高级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick_low) _形状_。 。 。 .**低级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick_close) _形状_。 。 。 .**关闭**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeCandlestick_width) _形状_。 。 。 .**宽度**(单位:千美元)_访问器Func_(中文(简体) ) 用于设置条形图访问数据的方式的属性存取器方法. 这个 `accessorFunc(datum, index)` 函数被调用到每个数据项上,返回 与该项目相关属性有关的数值. ### 错误栏 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeErrorBar) 页:1.**形状错误栏**(单位:千美元)_上下文_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeErrorBar_value) _形状错误栏_。 。 。 .**价值**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeErrorBar_high) _形状错误栏_。 。 。 .**高级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeErrorBar_low) _形状错误栏_。 。 。 .**低级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeErrorBar_width) _形状错误栏_。 。 。 .**宽度**(单位:千美元)_访问器Func_(中文(简体) ) 用于设置条形图访问数据的方式的属性存取器方法. 这个 `accessorFunc(datum, index)` 函数被调用到每个数据项上,返回 与该项目相关属性有关的数值. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeErrorBar_orient) _形状错误栏_。 。 。 .**东方**(单位:千美元)_方向_(中文(简体) ) 图表的方向 。 无论是 `horizontal` (违约)或 `vertical` ### 美国 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc) 页:1.**形状Ohlc**(单位:千美元)_上下文_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_x) _形状Ohlc_。 。 。 .**页:1**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_open) _形状Ohlc_。 。 。 .**打开**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_high) _形状Ohlc_。 。 。 .**高级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_low) _形状Ohlc_。 。 。 .**低级**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_close) _形状Ohlc_。 。 。 .**关闭**(单位:千美元)_访问器Func_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_width) _形状Ohlc_。 。 。 .**宽度**(单位:千美元)_访问器Func_(中文(简体) ) 用于设置条形图访问数据的方式的属性存取器方法. 这个 `accessorFunc(datum, index)` 函数被调用到每个数据项上,返回 与该项目相关属性有关的数值. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-shape/#readme-shapeOhlc_orient) _形状Ohlc_。 。 。 .**东方**(单位:千美元)_方向_(中文(简体) ) 图表的方向 。 无论是 `horizontal` (违约)或 `vertical` ## 常见问题 ### @d3fc/d3fc-shape 是什么？ 用于创建图表序列的 SVG/ Canvas 路径生成器集合 ### 如何安装 @d3fc/d3fc-shape？ 在项目目录运行 npm install @d3fc/d3fc-shape，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：d3-path（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @d3fc/d3fc-shape 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/d3fc\_\_d3fc-shape 是否存在。 ### @d3fc/d3fc-shape 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @d3fc/d3fc-shape 可以商用吗？ @d3fc/d3fc-shape 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @d3fc/d3fc-shape 的下载量有多少？ 根据 npm 官方下载统计，@d3fc/d3fc-shape 在 2026/10/11 – 2026/11/09 这 30 天内被下载 68,956 次，日均约 2,299 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @d3fc/d3fc-shape 还在维护吗？ 最新版本 6\.0\.1 发布于 2020/07/14（6 年前）；至今共发布 23 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。