分享数据流可视化动画组件（AIcode实现）数据流可视化动画组件在两个 DOM 元素之间绘制带粒子流动效果的贝塞尔曲线

DataLineFlow - 数据流可视化动画组件

在两个 DOM 元素之间绘制带粒子流动效果的贝塞尔曲线，直观呈现数据传输方向与状态。适用于网络拓扑、数据流向、系统架构等可视化场景。

效果预览

两个节点之间自动生成弧形连线
连线上有三角形粒子沿曲线方向持续流动，模拟数据传输
鼠标悬停时曲线高亮、粒子放大，并弹出提示信息
曲线中点可放置图标（如设备图标、状态图标）

动画1.gif

动画2.gif

动画3.gif

快速开始

基本用法

import DataLineFlow from './dataLineFlow'

const flow = new DataLineFlow({
  from: document.getElementById('nodeA'),
  to: document.getElementById('nodeB'),
  container: document.getElementById('canvasContainer'),
})

完整参数

const flow = new DataLineFlow({
  // 必填
  from: HTMLElement,       // 起始 DOM 元素
  to: HTMLElement,         // 目标 DOM 元素
  container: HTMLElement,  // Canvas 容器，曲线将绘制在此容器内

  // 连线样式
  curvature: 0.5,          // 曲线弯曲程度，0 为直线，正值向上弯，负值向下弯，默认 0.5
  lineColor: '#1af2ff',    // 曲线颜色，默认 '#1af2ff'
  lineWidth: 2,            // 曲线线宽，默认 2
  lineStyle: 'solid',      // 线型：'solid' | 'dashed' | 'dotted'，默认 'solid'

  // 粒子配置
  particleCount: null,     // 粒子数量，默认根据曲线长度自动计算（2~10），也可手动指定
  particleSize: 4,         // 粒子大小，默认 4
  particleSpeed: 0.004,    // 粒子流动速度（0~1 区间），默认 0.004
  particleColor: '#1af2ff',// 粒子颜色，默认与 lineColor 一致

  // 交互
  hoverWidth: 4,           // hover 时线宽，默认 4
  tooltip: '数据传输中',    // hover 提示文本
  onClick: (e) => {},      // 单击回调
  onDblClick: (e) => {},   // 双击回调

  // 中点图标
  midIcon: null,           // 中点图标，SVG path 字符串或图片 URL
  midIconSize: 16,         // 中点图标大小，默认 16
  midIconColor: '#1af2ff', // 中点图标颜色（仅 SVG path 生效），默认与 lineColor 一致
})

API

实例方法

方法	说明
`destroy()`	销毁实例，移除 Canvas、清除事件、停止动画

实例属性

属性	类型	说明
`isHovering`	Boolean	当前是否处于 hover 状态

功能详解

1. 贝塞尔曲线连线

组件在 from 和 to 元素的中心点之间绘制二次贝塞尔曲线。控制点位于起终点连线的垂直平分线上，偏移距离由 curvature 控制：

curvature = 0：直线连接
curvature > 0：向上弯曲
curvature < 0：向下弯曲

曲线每帧自动重新计算坐标，当 DOM 元素位置变化时（如拖拽、窗口缩放），连线会实时跟随。

2. 粒子流动动画

沿曲线方向有三角形箭头粒子持续流动，模拟数据传输效果：

数量：默认根据曲线长度自动计算，每 80 像素一个粒子，限制在 2~10 之间；也可通过 particleCount 手动指定
拖尾：每个粒子保留 5 帧历史轨迹，逐渐缩小和透明，形成拖尾效果
方向：粒子从 from 流向 to，直观表达数据传输方向

3. Hover 交互

鼠标靠近曲线时触发高亮效果：

曲线颜色变亮、线宽加粗至 hoverWidth
粒子放大 1.5 倍
显示 tooltip 提示文本
中点图标放大 1.3 倍

多条曲线共存时，同一时刻只有一条曲线处于 hover 状态，由内部注册表（FLOW_REGISTRY）统一管理，避免事件冲突。

4. 单击与双击

通过 250ms 延时区分单击和双击事件，避免误触。单击后立即触发 onClick，若 250ms 内再次点击则触发 onDblClick 并取消前一次单击回调。

5. 中点图标

曲线中点可放置装饰图标，支持两种形式：

SVG Path：传入 SVG path 的 d 属性字符串，通过 midIconColor 着色
图片 URL：传入图片地址，直接绘制图片

hover 时图标放大 1.3 倍，增强交互反馈。

6. 自动销毁

组件每帧检测 from 和 to 元素是否仍在 DOM 中。若任一元素被移除，自动调用 destroy() 清理资源。也可手动调用 destroy() 销毁实例。

使用示例

网络拓扑连线

const flow = new DataLineFlow({
  from: document.querySelector('.server-node'),
  to: document.querySelector('.client-node'),
  container: document.querySelector('.topology-container'),
  curvature: 0.3,
  lineColor: '#00ff88',
  particleColor: '#00ff88',
  tooltip: '服务端 → 客户端',
  onClick: (e) => console.log('查看链路详情'),
})

双向数据流

在两个节点之间创建两条弯曲方向相反的连线：

// A → B
const flowAB = new DataLineFlow({
  from: nodeA,
  to: nodeB,
  container,
  curvature: 0.4,
  lineColor: '#1af2ff',
  tooltip: 'A → B 上行流量',
})

// B → A
const flowBA = new DataLineFlow({
  from: nodeB,
  to: nodeA,
  container,
  curvature: -0.4,
  lineColor: '#ff6a00',
  tooltip: 'B → A 下行流量',
})

带状态图标的连线

const flow = new DataLineFlow({
  from: nodeA,
  to: nodeB,
  container,
  curvature: 0.5,
  midIcon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
  midIconColor: '#4caf50',
  midIconSize: 20,
  tooltip: '链路正常',
})

虚线连线

const flow = new DataLineFlow({
  from: nodeA,
  to: nodeB,
  container,
  lineStyle: 'dashed',
  lineColor: '#ffab00',
  particleSpeed: 0.002,
  tooltip: '备用链路',
})

注意事项

container 需设置 position: relative，Canvas 以绝对定位覆盖容器
组件基于 Canvas 2D 绘制，不支持 IE 浏览器
大量连线场景建议控制粒子数量，避免性能问题
销毁时务必调用 destroy()，防止内存泄漏

分享数据流可视化动画组件（AIcode实现）