# @d3fc/d3fc-chart 中文文档 规范地址：https://npmcn.com/package/%40d3fc/d3fc-chart/ 版本：5\.1\.9 npm 元数据更新时间：2024-07-30T09:41:23.586Z 中文译文更新时间：2026-11-11T08:07:35.786Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40d3fc/d3fc-chart 原文对照：https://npmcn.com/package/%40d3fc/d3fc-chart/?lang=original 项目主页：https://github.com/d3fc/d3fc 源码仓库：https://github.com/d3fc/d3fc ## 关键信息（来自 npm 元数据） - 包体积（解压后）：101 kB，19 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：5 个 - peer 依赖：d3-scale \*，d3-selection \* - 首次发布：2018-08-02T13:57:29.534Z - 最新版本发布：2024-07-30T09:41:23.319Z - 近 30 天下载量：62194（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：115（近 12 个月 0 个） ## 中文简介 一个简单的笛卡尔图元件,可以使画布或SVG. ## 安装 ```sh npm install @d3fc/d3fc-chart ``` 也可以使用：`pnpm add @d3fc/d3fc-chart`、`yarn add @d3fc/d3fc-chart`、`bun add @d3fc/d3fc-chart` ## README # d3fc 图 一个简单的笛卡尔图元件,可以使画布或SVG. ![](https://d3fc.io/examples/chart-cartesian-move-axis/screenshot.png) [主要 D3FC 软件包](https://github.com/d3fc/d3fc) ## 安装 ```bash npm install @d3fc/d3fc-chart ``` ## API 参考 ### API 概况 D3FC提供了一些组件/构件,使得使用SVG和帆布来构建标出D3图表更容易. 如果你只需要一个简单的笛卡尔图,这个包就是一个很好的起点,提供了一个简单的组件,它本身是利用其他D3FC包的组件来构建的(F)[d3fc-要素](https://github.com/d3fc/d3fc/tree/master/packages/d3fc-element#d3fc-element), (中文(简体) ), [d3fc-数据连接](https://github.com/d3fc/d3fc/tree/master/packages/d3fc-data-join#d3fc-data-join), (中文(简体) ), [d3fc-轴](https://github.com/d3fc/d3fc/tree/master/packages/d3fc-axis#d3fc-axis), (中文(简体) ), [d3fc系列](https://github.com/d3fc/d3fc/tree/master/packages/d3fc-series#d3fc-series), 等) (中文(简体) ). 鉴于以下情况: ```html
``` 以下代码使笛卡尔图: ```javascript var data = d3.range(50).map((d) => ({ x: d / 4, y: Math.sin(d / 4), z: Math.cos(d / 4) * 0.7 })); // use d3fc-extent to compute the domain for each axis var xExtent = fc.extentLinear() .accessors([d => d.x]); var yExtent = fc.extentLinear() .accessors([d => d.y, d => d.z]) .pad([0.1, 0.1]) // gridlines (from d3fc-annotation) // n.b. the gridlines are rendered using SVG var gridlines = fc.annotationSvgGridline(); // series (from d3fc-series) // n.b. the series are rendered using canvas var line = fc.seriesCanvasLine(); var area = fc.seriesCanvasArea() .mainValue(d => d.z); // combine into a single series var multi = fc.seriesCanvasMulti() .series([area, line]); // the Cartesian component, which uses d3fc-element for layout // of the standard features of a chart (axes, labels, plot area) var chart = fc.chartCartesian( d3.scaleLinear(), d3.scaleLinear() ) .xLabel('Value') .yLabel('Sine / Cosine') .chartLabel('Sine and Cosine') .yDomain(yExtent(data)) .xDomain(xExtent(data)) .svgPlotArea(gridlines) .canvasPlotArea(multi); // render d3.select('#sine') .datum(data) .call(chart); ``` 现拟出: ![](https://npmcn.com/package/%40d3fc/d3fc-chart/screenshots/cartesian.png) 图表采用一对平面图来构建. 缩放配置属性通过图表组件反弹(即再次曝光) `x` 财务报告和审定财务报表 `y` 前缀。 图表注意布局,如果包含元素的大小有变化,也会重新调整. ### 样式 组件会自动注入样式表,对元素应用必要的CSS. 这些风格可以用 CSS 来强化 - ```css d3fc-group.cartesian-chart > .x-label { line-height: 5em; color: red; } ``` 或者通过装饰 ```javascript chart.decorate(selection => { selection.enter() .select('.x-label') .style('line-height', '5em') .style('color', 'red') }); ``` ### 网格 内部,组件使用CSS网格布局来安排各种渲染表面和标签. 下图显示了网格结构及相关的行指标 - ``` 1 2 3 4 5 6 1 /-------------|-----------|---------------|------------|--------------\ | | | top gutter | | | 2 |-------------|-----------|---------------|------------|--------------| | | | top axis | | | 3 |-------------|-----------|---------------|------------|--------------| | left gutter | left axis | plot area | right axis | right gutter | 4 |-------------|-----------|---------------|------------|--------------| | | | bottom axis | | | 5 |-------------|-----------|---------------|------------|--------------| | | | bottom gutter | | | 6 \-------------|-----------|---------------|------------|--------------/ ``` 其他元素可以投放到这个网格中,或者在使用装饰的现有元素的位置上,或者在现有元素之外. 以下是这一进程的一些典型例子. 注:这些例子都采用了现代CSS网格规格语法. 为了在IE的遗留版本中实现这些功能,你需要额外设置以下等同的前缀属性- - `grid-column` - 说吧 `-ms-grid-column` - `grid-row` - 说吧 `-ms-grid-row` #### 使用自定义轴组件 默认情况下,图表对轴元件使用d3fc-轴. 此示例显示如何指定用于 X 和 Y 轴的轴元件 . ```javascript var chart = fc.chartCartesian({ xScale: d3.scaleLinear(), yScale: d3.scaleLinear(), xAxis: { bottom: myCustomAxis }, yAxis: { left: fc.axisLeft } }) .xLabel('Value') .yLabel('Sine / Cosine') .yOrient('left') .yDomain(yExtent(data)) .xDomain(xExtent(data)) .canvasPlotArea(series); ``` #### 添加第二个轴 默认情况下,图表允许左或右轴(参见 [x 东方](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xOrient)),但不是两者兼有. 这个例子显示了我们如何在另一个中使用装饰来添加—— ```javascript // create a scale for the second axis var zScale = d3.scaleLinear() .domain([-1000, 1000]); // create an axis for the scale var zAxis = d3.axisRight(zScale); chart.decorate(selection => { // when the chart is added to the DOM selection.enter() // additionally add a d3fc-svg element for the axis .append('d3fc-svg') // move the element into the right-axis cell .style('grid-column', 4) .style('grid-row', 3) // and set the axis width .style('width', '3em') // when there's a measure event (namespaced to avoid removing existing handlers) .on('measure.z-axis', (event) => { // set the range on the scale to the elements height zScale.range([event.detail.height, 0]); }) .on('draw.z-axis', (event,d) => { // draw the axis into the svg within the d3fc-svg element d3.select(event.currentTarget) .select('svg') .call(zAxis); }); }); ``` #### 翻译Y轴 对图表结构的更激进的改变也可以使用装饰来进行—— ```javascript chart.decorate(selection => { // select the x-axis selection.select('.x-axis') // move it into the plot-area .style('grid-row', 3) // listen for the draw event (using a namespace to avoid removing any existing handlers) .on('draw.move-axis', (event, d) => { // select the x-axis d3.select(event.currentTarget) // apply a top margin to the axis to align it to 0 on the y-axis .style('margin-top', `${yScale(0)}px`); }); // optionally: add some padding to fill the gap left by the x-axis selection.select('.x-label') .style('padding-top', '1em'); }); // optionally: re-position the x-axis tick labels so they're readable chart.xDecorate(selection => { selection.select('text') .attr('transform', 'translate(-7, 7)'); }); ``` #### 更改地块的 Z 顺序 默认情况下,地块区域的z顺序是后方为webgl,中后方为画布和上方为 svg. 这是将最常用的用于支持在前景中绘制的更具互动性的组件,在背景中绘制的互动性较少的组件. 在这种情况下互动是指直接响应用户输入,例如绘制说明或突出数据元素. 通常更容易使用svg(由于其用户发起的事件模式更丰富)或画布(由于它的API更简单)来开发这些组件. 如果这种 Z 顺序不合适,则可以使用装饰来修改顺序 - ```javascript chart.decorate(selection => { // using the enter selection to ensure this only runs once, select each plot area node const svgPlotArea = selection.enter() .select('.svg-plot-area') .node(); const canvasPlotArea = selection.enter() .select('.canvas-plot-area') .node(); const webglPlotArea = selection.enter() .select('.webgl-plot-area') .node(); // create a selection of the nodes in the required order d3.selectAll([canvasPlotArea, svgPlotArea, webglPlotArea]) // order the nodes in the DOM by their selection order .order(); }); ``` ### 笛卡尔 [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-chartCartesian) 页:1.**图表**(单位:千美元)_十. 规模_, (中文(简体) ), _比例_(中文(简体) ) 以给定的天平构建新的笛卡尔图表. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-chartCartesianSettings) 页:1.**图表**({ x 比例 : _十. 规模_缩放 : _比例_, x轴:轴线 Factory, yAxory: 轴线 Factory }) 构造带有给定的天平和轴组件的新笛卡尔图表. 若为 _x 轴_ 指定,它必须是具有需要的x轴工厂功能的对象(_顶端_ 若为 _x 东方_\="顶"或 _下边_ 若为 _x 东方_\="底层"). 若为 _y 轴_ 指定,它必须是具有所需y轴工厂功能的对象(_左边_ 若为 _y 东方_\="左边"或 _对_ 若为 _y 东方_\="对"). [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_svgPlotArea) _笛卡尔_。 。 。 .**svg 绘图区**(单位:千美元)_组件_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_canvasPlotArea) _笛卡尔_。 。 。 .**画布绘图区**(单位:千美元)_组件_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_webglPlotArea) _笛卡尔_。 。 。 .**网络gl绘图区**(单位:千美元)_组件_(中文(简体) ) 若为 _组件_ 指定,设置要渲染到 SVG/canvas 上的组件,并返回笛卡尔图。 若为 _组件_ 未指定,返回现有组件. 若为 _画布绘图区_ 或者说 _网络gl绘图区_ 重排时使用 _上下文_ 自动应用于图表. 对于包含非常多的数据点的系列,渲染到画布可以缩短渲染时间并改进性能. 对于需要用户交互的组件,向SVG渲染可以简化其执行. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_useDevicePixelRatio) _笛卡尔_。 。 。 .**使用DevicePixelRatio 软件**(单位:千美元)_价值_(中文(简体) ) 如果布尔 _价值_ ,设置 Canvas / WebGL 是否应根据显示设备的分辨率进行缩放,并返回笛卡尔图表。 若为 _价值_ 未指定,返回当前值. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_chartLabel) _笛卡尔_。 。 。 .**图表标签**(单位:千美元)_标签_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xLabel) _笛卡尔_。 。 。 .**x 标签**(单位:千美元)_标签_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yLabel) _笛卡尔_。 。 。 .**y 标签**(单位:千美元)_标签_(中文(简体) ) 若为 _标签_ ,设置给定标签的文本,并返回笛卡尔图表。 若为 _标签_ 未指定,返回标签文本. 这个 _标签_ 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 . [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xAxisHeight) _笛卡尔_。 。 。 .**轴高**(单位:千美元)_高度_(中文(简体) ) 若为 _高度_ 指定,设置x轴的高度,并返回笛卡尔图表。 若为 _高度_ 未指定,返回x轴高度,否则无效。 值应为带有单位的字符串(如"2em"). 这个 _高度_ 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 . [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yAxisWidth) _笛卡尔_。 。 。 .**轴线**(单位:千美元)_宽度_(中文(简体) ) 若为 _宽度_ 指定,设置 Y 轴的宽度,并返回笛卡尔图表。 若为 _宽度_ 未指定,返回 Y 轴宽度,如果未设定,则无效。 值应为带有单位的字符串(如"2em"). 这个 _宽度_ 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 . [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xOrient) _笛卡尔_。 。 。 .**x 东方**(单位:千美元)_东方_(中文(简体) ) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yOrient) _笛卡尔_。 。 。 .**y 东方**(单位:千美元)_东方_(中文(简体) ) 若为 _东方_ 中指定了方向,设置方向,并返回笛卡尔图。 若为 _东方_ 未指定方向,返回方向。 有效数值 _y 东方_ 为: _左边_, (中文(简体) ), _对_ 或者说 _无_,用于 _x 东方_ 他们是 _顶端_, (中文(简体) ), _下边_ 或者说 _无_。 。 。 . 如果方向为: _无_ 为轴、轴、轴标签及其容器指定. 这个 _东方_ 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 . [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_decorate) _笛卡尔_。 。 。 .**装饰**(单位:千美元)_装饰Func_(中文(简体) ) 若为 _装饰Func_ ,将装饰器功能设置到指定的位置,并返回笛卡尔图表。 若为 _装饰Func_ 未指定,返回当前装饰器函数. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xDomain) _笛卡尔_。 。 。 .**x 域名**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yDomain) _笛卡尔_。 。 。 .**区域**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xNice) _笛卡尔_。 。 。 .**不错**(...) . 笛卡尔图表显示比例尺属性,其中之一 `x` 或者说 `y` 前缀. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xTicks) _笛卡尔_。 。 。 .**x 键**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xTickFormat) _笛卡尔_。 。 。 .**x 文本格式**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_xDecorate) _笛卡尔_。 。 。 .**十进制**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yTicks) _笛卡尔_。 。 。 .**yTicks 语句**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yTickFormat) _笛卡尔_。 。 。 .**yTick 格式**(...) [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-chart/#readme-cartesian_yDecorate) _笛卡尔_。 。 。 .**调和**(...) . 笛卡尔图显示 [d3fc-轴](https://github.com/d3fc/d3fc/tree/master/packages/d3fc-axis#d3fc-axis) _键_, (中文(简体) ), _勾选大小_, (中文(简体) ), _勾选值_, (中文(简体) ), _勾选表_, (中文(简体) ), _勾选参数_, (中文(简体) ), _滴答内置_, (中文(简体) ), _勾选大小输出_, (中文(简体) ), _勾选_, (中文(简体) ), _勾选中心标签_ 财务报告和审定财务报表 _装饰_ 属性,其中之一 `x` 或者说 `y` 前缀. ## 常见问题 ### @d3fc/d3fc-chart 是什么？ 一个简单的笛卡尔图元件,可以使画布或SVG\. ### 如何安装 @d3fc/d3fc-chart？ 在项目目录运行 npm install @d3fc/d3fc-chart，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：d3-scale（\*）、d3-selection（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @d3fc/d3fc-chart 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @d3fc/d3fc-chart 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @d3fc/d3fc-chart 可以商用吗？ @d3fc/d3fc-chart 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @d3fc/d3fc-chart 的下载量有多少？ 根据 npm 官方下载统计，@d3fc/d3fc-chart 在 2026/10/11 – 2026/11/09 这 30 天内被下载 62,194 次，日均约 2,073 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @d3fc/d3fc-chart 还在维护吗？ 最新版本 5\.1\.9 发布于 2024/07/30（2 年前）；至今共发布 115 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。