# @data-ui/event-flow 中文文档

规范地址：https://npmcn.com/package/%40data-ui/event-flow/

版本：0\.0\.84
npm 元数据更新时间：2022-06-12T16:52:52.444Z
中文译文更新时间：2026-11-11T12:57:55.268Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40data-ui/event-flow
原文对照：https://npmcn.com/package/%40data-ui/event-flow/?lang=original
项目主页：https://github.com/williaster/data-ui#readme
源码仓库：https://github.com/williaster/data-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.2 MB，57 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：30 个
- peer 依赖：aphrodite ^1\.2\.0，react ^15\.0\.0-0 \|\| ^16\.0\.0-0
- 首次发布：2017-07-12T06:05:53.618Z
- 最新版本发布：2019-11-19T23:44:41.608Z
- 近 30 天下载量：15467（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：40（近 12 个月 0 个）

## 中文简介

探索事件序列的可视化

## 安装

```sh
npm install @data-ui/event-flow
```

也可以使用：`pnpm add @data-ui/event-flow`、`yarn add @data-ui/event-flow`、`bun add @data-ui/event-flow`

## README

# 事件流量

演示到 [(原始内容存档于2017-10-21). williaster.github.io/data-ui](https://williaster.github.io/data-ui)

![](https://user-images.githubusercontent.com/4496521/28103495-d58b2c34-668a-11e7-86c3-3b33d853153a.gif)

### 概览

这种可视化的灵感来自 [2011 生活花纸](https://www.cs.umd.edu/~ben/papers/Wongsuphasawat2011LifeFlow.pdf) 从本・斯奈德曼的团体。 它的用意是在事件序列中帮助寻找汇总模式. 它需要多个用户(或泛指实体)的事件序列作为输入,并使用以下可视范式将相类似的序列合并在一起:

![](https://user-images.githubusercontent.com/4496521/28243463-9fef9734-697f-11e7-959b-027544c8f6e0.png)

### 特征

可视化具有多种特点,便于探索分析:

-   #### 事件调整
    
    用户可以通过任意事件对齐事件序列 _指数_ 活动 _类型_ (如第2次点击事件). 这个操作实际上可以过滤出事件序列,例如如果由th 3rd事件对齐,一个序列只有2个事件,或者由第一个事件类型"x"对齐,一个特定序列没有该类型事件. 被过滤的节点以图案行根节点显示,并在图例中显示.
    
-   #### 事件类型过滤
    
    用户可以通过点击右面板中的传说来过滤/过滤出特定类型的事件. 此操作仍然对齐了完整未过滤的序列,但随后会从视图中隐藏相关的事件类型. 隐藏事件的数量在右面板上显示.
    
-   #### 原始序列视图
    
    通过点击聚合视图中的任何节点或边缘,集合面板会过滤到所选择的子树上,用户可以在下方面板上查看该选择所捕获的原始序列. 您可以隐藏面板来探索聚合视图, 也可以清除选择返回未过滤视图 .
    
-   #### 事件类型细分
    
    事件类型计数的分解在右相框显示为饼图. 这种分解还显示根据相对状态而过滤出或隐藏出的事件的数量.
    
-   #### X 轴 -- -- 已过期时间对序列
    
    默认情况下,根据从 _上一个_ 节点。 相近相距的事件可能很难区分出,因此相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相相距相距相距相距相距相距相距相相距相距相相距相距相.
    
-   #### 节点排序( 垂直)
    
    默认的节点会被命令上- >下基于高->低事件计数,这意味着最常见的节点出现在顶端. 用户也可以通过短 - > 时间过长到下一个事件.
    
-   #### 调整
    
    为了提高可视化/网络应用性能并减少可视噪声,可以隐藏代表不到最小事件数量的节点. 再次,所有事件都考虑序列对齐,但"leaf"节点被隐藏在视图中.
    
-   #### 缩放
    
    X-和Y-轴缩放+Panning得到常见鼠标运动的支持.

## 常见问题

### @data-ui/event-flow 是什么？

探索事件序列的可视化

### 如何安装 @data-ui/event-flow？

在项目目录运行 npm install @data-ui/event-flow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：aphrodite（^1\.2\.0）、react（^15\.0\.0-0 \|\| ^16\.0\.0-0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @data-ui/event-flow 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/data-ui\_\_event-flow 是否存在。

### @data-ui/event-flow 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @data-ui/event-flow 可以商用吗？

@data-ui/event-flow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @data-ui/event-flow 的下载量有多少？

根据 npm 官方下载统计，@data-ui/event-flow 在 2026/10/12 – 2026/11/10 这 30 天内被下载 15,467 次，日均约 516 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @data-ui/event-flow 还在维护吗？

最新版本 0\.0\.84 发布于 2019/11/20（6 年前）；至今共发布 40 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/07/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。