# @flourish/data-popup 中文文档
规范地址：https://npmcn.com/package/%40flourish/data-popup/
版本：5\.0\.0
npm 元数据更新时间：2026-11-10T14:06:28.448Z
中文译文更新时间：2026-11-15T00:03:38.479Z
软件包许可：UNLICENSED
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40flourish/data-popup
原文对照：https://npmcn.com/package/%40flourish/data-popup/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：69 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2018-07-23T11:09:19.400Z
- 最新版本发布：2026-11-10T14:06:28.147Z
- 近 30 天下载量：5663（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 1 个）
## 中文简介
用数据插入弹出
## 安装
```sh
npm install @flourish/data-popup
```
也可以使用：`pnpm add @flourish/data-popup`、`yarn add @flourish/data-popup`、`bun add @flourish/data-popup`
## README
# 面粉数据弹出
启用由面粉装订的有样式和数据绑定的弹出
## 安装
`npm install @flourish/data-popup`
## 使用量
这个 `settings.yml` 文件应当导入到模板中 `template.yml` 文件,像这样 :
```yaml
- Popups
- property: mypopup
import: "@flourish/data-popup"
```
`Popup(container, state)` 创建弹出式附件 `container`。 。 。 .
只通过州为弹出. 例如: `Popup("#wrapper", state.mypopup)`
通过调用添加列名到弹出 `popup.addColumnNames(data.data.column_names)`。 。 。 .
`popup.point(x, y)` 将弹出点指向给定坐标.
`popup.point(element)` 将弹出指向给定元素的中心.
`popup.html(html).draw()` 显示带有 html 的弹出。 如果你没有在其中指定一个参数 `.html()` 它会返回弹出 html.
`popup.draw(datapoint)` 根据设置通过一个用于渲染的数据点(例如来自D3)。 您也可以将一个装饰器功能传递给此调用, 这将获取弹出时的根 DOM 元素, 您可以用来应用额外的样式 .
例如:
```javascript
data_popup.point(this).draw(d, function(el) {
el.querySelector("h1").style.color = "red";
});
```
### 指定默认模板
也可以为弹出内容指定不同的模板. 例如,如果您想要添加一个 标签或内容需要以特定的顺序显示.
在初始化数据弹出时可以在默认模板中通过. 在卷括号之间添加数据绑定名称, 如 `{{name_of_data_binding}}`· ;
例如:
```javascript
var popup_template = "
{{name}}
";
Popup(container, state, popup_template);
```
### 指定弹出标题
弹出后可以增加标题. 默认情况下,它会寻找一个名为“ `id` 并把它变成一个 `` 标签。 在初始化"数据弹出"时,可以在第4个参数中覆盖这个. 例如,当您想要将一个名为“ name” 的绑定数据转换为弹出标题时:
```javascript
Popup(container, state, null, "name");
```
## 常见问题
### @flourish/data-popup 是什么？
用数据插入弹出
### 如何安装 @flourish/data-popup？
在项目目录运行 npm install @flourish/data-popup，或使用 pnpm add / yarn add / bun add。
### @flourish/data-popup 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flourish\_\_data-popup 是否存在。
### @flourish/data-popup 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @flourish/data-popup 可以商用吗？
@flourish/data-popup 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。
### @flourish/data-popup 的下载量有多少？
根据 npm 官方下载统计，@flourish/data-popup 在 2026/10/15 – 2026/11/13 这 30 天内被下载 5,663 次，日均约 189 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @flourish/data-popup 还在维护吗？
最新版本 5\.0\.0 发布于 2026/11/10（5 天前）；至今共发布 18 个版本，其中过去 12 个月发布了 1 个；首次发布于 2018/07/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。