Open-Lineage

一个企业级的大数据血缘系统，支持 Hive 和 Mysql，前端功能丰富，包括模型放大缩小、下载图片、小地图、文字水印，还支持字段级血缘和完整血缘的切换，另外还支持切换 Sql 编辑区的主题色，修改文字水印，修改线条高亮颜色等功能。

遇到的问题

这里再分享下在项目开发的过程中遇到的一些问题，帮助大家在遇到类似的问题的时候该如何解决，不过最终都在 AntV G6 的官网上和官网群聊中找到了答案

渲染之后调用 fitView() 方法不生效

/**
 * 渲染视图
 */
export const renderGraph = (graph: any, lineageData: any) => {
  if (!graph || !lineageData) return;
  graph.data(lineageData);
  graph.render();
  graph.fitView();
};

最后在 AntV G6 官网找到答案

https://g6.antv.antgroup.com/api/graph#graphoptionsfitview

也就是说要在初始化 Graph 的时候设置 fitView 为 true 才生效

graphRef.current = new G6.Graph({
  container: container || '',
  width: width,
  height: height,
  plugins: [grid, minimap, toolbar],
  fitView: true,
  modes: {
    default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
  },
});

点击字段空白处不触发事件

定义的事件如下，点击图中可触发事件区域可以触发事件，但是点击图中不可触发事件区域未能触发事件

// 监听节点点击事件
graph.off('node:click').on('node:click', (evt: any) => {
  const { item, target } = evt;
  const currentAnchor = target.get('name');
  if (!currentAnchor) return;

  if (fieldCheckedRef.current) {
    handleNodeClick(graph, item, currentAnchor, 'highlight');
  } else {
    handleNodeClick(graph, item, currentAnchor, 'tableHighlight');
  }
});

这个问题比较有意思，最后在也是通过对比官网案例最终找到了答案，

官网案例：https://g6.antv.antgroup.com/examples/interaction/partialResponse#partialNode

经过对比发现：例子中的蓝色小圆是填充了蓝色，而我们的没有填充，所以猜测可能是我们的字段矩形没有填充东西，也就是所矩形是空的，所以监听不到事件。

填充之前的代码如下：

attrs.forEach((e: any, i: any) => {
  const { key } = e;
  // group部分图形控制
  listContainer.addShape('rect', {
    attrs: {
      x: 0,
      y: i * itemHeight + itemHeight,
      width: width,
      height: itemHeight,
      cursor: 'pointer',
    },
    name: key,
    draggable: true,
  });
});

给矩形填充白色

attrs.forEach((e: any, i: any) => {
  const { key } = e;
  // group部分图形控制
  listContainer.addShape('rect', {
    attrs: {
      x: 0,
      y: i * itemHeight + itemHeight,
      fill: '#ffffff',
      width: width,
      height: itemHeight,
      cursor: 'pointer',
    },
    name: key,
    draggable: true,
  });
});

正如我们猜测的那样，填充颜色之后果然能够监听到事件了。

使用 dagre 布局有一些表局部有重叠和间距不一致问题

最后通过在 AntV 官方交流群交流之后确定，这应该是我们数据的问题，这里再次感谢他们的解答，也就是说应该是接口返回的数据中同一层级有多个相同的 index 导致

一些表局部有重叠和间距不一致现象。所以后面尝试了下自定义布局，针对目前的数据探索解决方案，目前自定义布局已完成，请看下一章