/jsplumb-dataLineage-vue

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

Primary LanguageJavaScriptMIT LicenseMIT

jsplumb-dataLineage-vue

基于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.其他