Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

https://github.com/mizuhokaga/jsplumb-dataLineage 数据血缘前端 jsplumb-dataLineage的Vue版本（Vue2、Vue3均实现）

License

NotificationsYou must be signed in to change notification settings

mizuhokaga/jsplumb-dataLineage-vue

Repository files navigation

基于Vue和jsPlumb的、模仿sqlFlow前端的数据血缘前端展示页面

1.效果

图片

  • 表级关联：data1 到 middle1
表级JSON： "edges":  [    {    "from": {        "field": "",        "name": "data1"            },    "to": {        "field": "",        "name": "middle1"            }    },    ……]
  • 字段级关联：middle1的age字段 到 middle3的age字段
字段JSON："edges":[    {    "from": {        "field": "age",        "name": "middle1"            },    "to": {        "field": "age",        "name": "middle3"            }    },    ……]

2.如何启动？

2.1安装依赖

npm install

2.2本地运行

npm run serve

浏览器访问http://localhost:8620

3.功能：

  • 根据json渲染血缘图，每个节点可自由拖动；
  • 移动到连线上==高亮==相关列和线,因为失灵时不灵连线高亮暂时注释掉了
  • 画布支持缩放 （鼠标中键滚轮缩放）
  • 画布的整体无限平移
  • 导出血缘为JSON 或 PNG图片

待实现功能：

  • minimap

4.其他

About

https://github.com/mizuhokaga/jsplumb-dataLineage 数据血缘前端 jsplumb-dataLineage的Vue版本（Vue2、Vue3均实现）

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp