Open-Lineage

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

自定义布局

先看下效果图：

特点：

层次布局
整体居中对齐，以中线上下等距
节点之间没有重叠
节点之间距离相等
层次之间距离相等

自定义布局

未居中对齐时：

居中对齐后：

主要代码：

/**
 * 执行布局
 */
function execute() {
  const self = this;
  const { nodes, edges, ranksep, nodesep, begin } = self;
  if (!nodes) return;
  const layerMap: Map<number, Node[]> = new Map();
  nodes.forEach((item: any, index, arr) => {
    if (!layerMap.has(item.level)) {
      layerMap.set(
        item.level,
        arr.filter((node: any) => node.level === item.level)
      );
    }
  });

  // TODO 重新调整层级
  const startX = begin[0];
  const startY = begin[1];
  const size = layerMap.size;
  const maxWidth = size * nodeWidth + (size - 1) * ranksep;
  const hr = Array.from(layerMap.values()).map((list: any[]) => {
    const sum = list.reduce((pre: any, curr: any) => {
      return pre + curr.size[1];
    }, 0);
    return sum + (list.length - 1) * nodesep;
  });
  const maxHeight = Math.max(...hr);
  const offsetX = startX + maxWidth;
  const offsetY = startY + maxHeight;
  const centerLine = offsetY - maxHeight / 2;

  layerMap.forEach((value, key) => {
    let d = key === maxLevel ? size - 1 : key;
    const x = offsetX - d * (nodeWidth + ranksep);
    const y = centerLine + hr[d] / 2;
    const sortNodes = value.sort((x: any, y: any) => y.order - x.order);
    let preY = y;
    sortNodes.forEach((e: any, index) => {
      const { size } = e;
      const margin = index === 0 ? 0 : nodesep;
      preY = preY - size[1] - margin;
      e.x = x;
      e.y = preY;
    });
  });
  if (self.onLayoutEnd) self.onLayoutEnd();
}

完整代码路径：/src/components/Layout/