使用的 jsPlumb.js 版本是Community Edition社区版 1.7.6
2022-02-14 15:15:35 基于Vue2版本的已开源,地址:https://github.com/mizuhokaga-dataLineage/jsplumb-dataLineage-vue
后端给定sql的数据血缘json信息,前端需要实现类似sqlFlow的表和列的连线展示数据血缘关系。下图是sqlflow的示例图
缩放「css的scala属性」
流程图下载保存为图片「使用html2cavans.js实现」
流程图下载保存为json文件「暂时做法是直接下载后端传递的json」
画布拖动(使用鼠标右键拖动,这个功能写得挺烂的)
鼠标移动到了连接线上后,线两端连接的表的列高亮「jsplumb绑定连线的mouseout和mouseover事件」
小地图导航
对index.js
的main()
修改,注释请求接口的代码改用本地json数据
function main() {
jsPlumb.setContainer('bg');
// 使用后端接口血缘json
// $.get(requestURL, function (res, status) {
// if (status === "success") {
// jsonData = res;
// DataDraw.draw(jsonData)
// }
// }, 'json');
// 或使用本地数据
DataDraw.draw(json);
}
参考
这些项目写的!本项目只实现了根据json渲染图表的功能,其他功能如删除表和连线由于业务不需要没有编写或保留。
由于本人写前端时间不多并且有些代码写法是根据业务来写的,一些奇怪的写法不要在意!欢迎提issues!
其中:
非常感谢 katherineOne 和 yesky12 的宝贵建议和帮助!