mizuhokaga的博客

基于Vue和jsplumb的模仿sqlFLow数据血缘图的前端

一、概况接到了数据血缘的需求，前端要求效果类似sqlflow。通过大佬的类似demo发现了jsplumb这个连线库。然后看文档和github一些demo捣鼓出来了。基本效果如下：目前已实现效果：流程图下载为png图片流程图下载为json数据流程图缩放流程图拖动选择连线，线两端的节点高亮...

字节跳动内部的数据血缘用例与设计全链路数据血缘在满帮的实践饿了么元数据管理实践之路携程数据血缘构建及应用https://www.jianshu.com/p/6a14c846e331Hive SQL血缘关系解析与应用 虽然没有公布完整代码，但是给了我解析ast的思路Hive SQL的编译过程_美团技术团队大数据血缘分析系统设计（一） - CXY的大数据实践田 简单使用hive自带的钩子函数获取血缘使用Hive内置的解析器构建血缘关系数据治理篇-元数据-血缘分析: queryparser概述

java绘制DAG

panzoom 默认缩放比例参数

文章目录Hive 数据血缘实现介绍表级别表级别总结推荐阅读:字段级别字段级别总结推荐阅读:Hive 数据血缘实现介绍Hive作为一个离线数仓工具,其实自带了数据血缘分析的解决方案:表级别: org.apache.hadoop.hive.ql.tools 下的LineageInfo类字段级别:这里有两种方式org.apache.hadoop.hive.ql.hooks.LineageLogger类Execution Hooks机制本文只做简单介绍,方便自己查询表级别LineageIn

0.问题在利用jsPlumb.deleteEveryConnection 删除所有连线报错jsPlumb.deleteEveryConnection is not a function!1.解决jsPlumb.js 版本是Community Edition社区版 1.7.6。我的jsPlumb是cdn引入的，直接去网页上查看js源文件。发现deleteEveryConnection方法的确搜索不到，然后翻了下，在文件中找到了detachEveryConnection()！使用jsPlumb

0、前言之前写了篇 基于jsPlumb.js的模仿sqlFlow数据血缘图的前端页面，是利用jsplumb.js模仿sqlflow的前端。然后有些小伙伴想看后端代码，当时第一版代码写得太乱了，所以就没直接发。磨了1个月，虽然还有bug但是也算基本能跑了。

序之前基于jsPlumb.js的模仿sqlFlow数据血缘图的前端页面里就有人催我写Vue版本的,虽然当时想着年前写完,不过本来就不是写前端的,拖拖拉拉一句话"年后再说".现在年过完了,也该还债了XD这篇文章是记录Vue版本的利用jsPlumb模仿sqlFlow数据血缘图的前端页面所踩下的自己的坑:Vue版本的利用jsPlumb模仿sqlFlow数据血缘图的前端页面链接:(待更新)Vue使用版本:vue2,vuecli 4.5.15问题列表vue-router和vuecli版本冲突 已解

0.数据血缘可视化这块目前比较优秀的就是SQLFlow（马哈鱼数据血缘分析器）了。我们可以从SQLFlow的json格式中学习数据血缘json格式设计。饿了么数据血缘，这里面有饿了么元数据管理数据血缘的json格式设计1.实例如何获取SQLFlow的json？在可视化画布上右键–》Download as json以SQLFlow带的的 Hive sample sql 为例。SELECT pageid, adidFROM pageAds LATERAL VIEW explode(adid