# @d3fc/d3fc-element 中文文档 规范地址：https://npmcn.com/package/%40d3fc/d3fc-element/ 版本：6\.2\.0 npm 元数据更新时间：2022-04-05T02:30:54.315Z 中文译文更新时间：2026-11-11T08:04:31.655Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40d3fc/d3fc-element 原文对照：https://npmcn.com/package/%40d3fc/d3fc-element/?lang=original 项目主页：https://github.com/d3fc/d3fc 源码仓库：https://github.com/d3fc/d3fc ## 关键信息（来自 npm 元数据） - 包体积（解压后）：65.3 kB，18 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2018-08-02T13:50:44.994Z - 最新版本发布：2021-08-02T13:48:08.103Z - 近 30 天下载量：67794（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：76（近 12 个月 0 个） ## 中文简介 自定义 HTML 元素,可以更容易地创建反应可视化功能,方便地与其他 UI 框架(如 React, Angular)相融合 ## 安装 ```sh npm install @d3fc/d3fc-element ``` 也可以使用：`pnpm add @d3fc/d3fc-element`、`yarn add @d3fc/d3fc-element`、`bun add @d3fc/d3fc-element` ## README # d3fc-要素 自定义 HTML 元素,可以更容易地使用 CSS 创建响应性的 D3可视化,方便地与其他UI 框架(如 React,Angular)相融合. [主要 D3FC 软件包](https://github.com/d3fc/d3fc) ## 安装 ```bash npm install @d3fc/d3fc-element ``` ### 圆柱体 此软件包需要自定义元素( v1 即 . `customElements.define` 没有扩展内置( N) 和自定义Event 支持 。 如果您正在瞄准一个不支持这些 API 的浏览器, 可以使用以下的多填充 -- - [自定义事件](https://github.com/krambuhl/custom-event-polyfill) - [自定义元素](https://github.com/WebReflection/document-register-element) ## API 参考 - [ (英语)](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-d3fc-svg) - [ (英语)](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-d3fc-canvas) - [](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-d3fc-group) ### (中文(简体) ) 这些元素提供了一个巢穴 `svg` 或者说 `canvas` 元素作为D3可视化的渲染表面。 使用 CSS 来大小元素,其像素尺寸会被自动传播到被嵌入元素. 渲染是一个三相过程 自动与动画框架对齐, _计量_, (中文(简体) ), _调整大小_ (如有需要)和 _绘图_编辑 _调整大小_ 财务报告和审定财务报表 _绘图_ 相间发出类似命名的事件,以便调用渲染代码. 分裂是允许在任何渲染发生之前,在文档的所有表面进行测量逻辑。 通过防止 DOM 读取(在 _计量_)与 DOM 写作(应在 _绘图_) (中文(简体) ). ```html ``` ```js const xScale = d3.scaleLinear() .domain([0, 10]); const xAxis = d3.axisBottom(xScale); const xAxisContainer = d3.select('#x-axis') .on('measure', (event) => { const { width } = event.detail; xScale.range([0, width]); }) .on('draw', (event) => { d3.select(event.currentTarget) .select('svg') .call(xAxis); }); // Now that the event handlers are added, request a redraw xAxisContainer.node() .requestRedraw(); // Some time later... setTimeout(() => { // ...a change requiring a redraw occurs... xScale.domain([0, 5]); // ...so we request a redraw of the element. xAxisContainer.node() .requestRedraw(); }, 1000); ``` [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-surface_requestRedraw) _表面_。 。 。 .**请求红色raw**(a) 与《公约》有关的其他事项 重新绘制到下一个动画框上, 只有当还没有等待。 如果一个电话已经等待,这个电话就会被忽略. 应当指出 `requestRedraw` 是一个同步的。 它不直接引用绘图事件, 因此事件处理器中出现的任何错误都无法被捕获 . [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-surface_useDevicePixelRatio) _表面_。 。 。 .**使用DevicePixelRatio 软件**(a) 与《公约》有关的其他事项 作为财产可供使用 `useDevicePixelRatio` 属性 `use-device-pixel-ratio`。控制表面维度是否乘以 [`devicePixelDepth`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) 如果有的话. [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-canvas_setWebGlViewport) _画布_。 。 。 .**设置WebGlViewport**(a) 与《公约》有关的其他事项 说明 `d3fc-svg` 不支持此属性. 作为财产可供使用 `setWebglViewport` 属性 `set-webgl-viewport`。控制表层维度是否额外设置在 WebGL 上下文 [视图](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/viewport)。 。 。 . ### 没有视觉表现的元素,用于组合相干渲染表面([ (英语)](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-d3fc-svg)编号 :[ (英语)](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-d3fc-canvas)) (中文(简体) ). 它的核心宗旨是多播 [_组_. 请求雷德劳](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-group-requestRedraw) 呼叫后人表面并提供汇总绘图事件。 此外,它还提供助手,允许 [自动重排](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-group-autoResize) 对窗口的后人表面 `resize` 事件. ```html

A Cartesian Chart

``` [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-group-autoResize) _组_。 。 。 .**自动回复** =: _自动回复_ 作为财产可供使用 `autoResize` 属性 `auto-resize`如果 `true`,倾听 `window` `resize` 自动引用 [_组_. 请求雷德劳](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-group-requestRedraw)。 。 。 . [{\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0}](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-group_requestRedraw) _组_。 。 。 .**请求红色raw**(a) 与《公约》有关的其他事项 相当于援引 [_表面_. 请求雷德劳](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-surface-requestRedraw) 所有后人群体或表面元素。 此类和后人群体或表面所引发事件的顺序保证按文件顺序排列(即使在这一呼吁之前或之后就其中之一重新绘制请求). ### 活动 以下自定义 DOM 事件由元素释放出 -- - `measure` - 表示该元素已被测量。 一般情况下 `measure` 事件用于设置 [范围](https://github.com/d3/d3-scale#continuous_range) 或应用变换. - `draw` - 表示元素需要绘图。 一般情况下 `draw` 事件用于渲染组件或执行任何有声数据joins. 以下属性可用于 `detail` 属性 [](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-d3fc-group)) - (英语) - `width` - 以像素表示的表面宽度. - `height` - 以像素计的地表高度. - `resized` - 显示元素是否自上次平分以来已调整大小的旗帜. 注:立即援引是安全的 [_表面_. 请求雷德劳](https://npmcn.com/package/%40d3fc/d3fc-element/#readme-surface_requestRedraw) 如果您想要创建动画, 则来自事件处理器。 重新绘制将被安排在之后的动画框架上. ## 常见问题 ### @d3fc/d3fc-element 是什么？ 自定义 HTML 元素,可以更容易地创建反应可视化功能,方便地与其他 UI 框架\(如 React, Angular\)相融合 ### 如何安装 @d3fc/d3fc-element？ 在项目目录运行 npm install @d3fc/d3fc-element，或使用 pnpm add / yarn add / bun add。 ### @d3fc/d3fc-element 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/d3fc\_\_d3fc-element 是否存在。 ### @d3fc/d3fc-element 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @d3fc/d3fc-element 可以商用吗？ @d3fc/d3fc-element 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @d3fc/d3fc-element 的下载量有多少？ 根据 npm 官方下载统计，@d3fc/d3fc-element 在 2026/10/11 – 2026/11/09 这 30 天内被下载 67,794 次，日均约 2,260 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @d3fc/d3fc-element 还在维护吗？ 最新版本 6\.2\.0 发布于 2021/08/02（5 年前）；至今共发布 76 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。