lineage-graph

Release Note

• 0.5.0 新增 LineageSimpleGraph，支持G6原生参数传入
• 0.4.0 增加两种布局：LineageSugiyamaGraph， LineageToplogicalGraph
• 0.3.0 所有组件全部改为函数组件，不具有生命周期
• 0.2.0 修改组件抽象逻辑，文件解耦

前言

    在数据中台，存在着大量的元数据信息，它们来源于计算任务，特征模型等各个领域，通过各个元数据之间的血缘关系，可以实现上下游排查，依赖分析，故障排查等一系列的功能。而在开发过程中，血缘图的交互和布局大多是类似的，如果每次基于G6进行开发，不仅开发成本比较高，而且现阶段较多外包介入前端开发的情况下，G6对于外包的入手和开发成本过高。于是需要一个开箱即用的血缘图方案，基于React，而且能够通过直接引入组件快速创建一个血缘图，并可以进行简单的交互，并且通过独立封装各个布局方便不同场景下的血缘图使用。

特性

    LineageGraph侧重于让用户更低成本的使用G6，所以侧重于简化了G6的整个初始化过程，并且希望用户进行尽量少的操作，来达成相应的目的，封装了整个g6的生命周期在一个react组件内部，并且支持props进行个性化定制，这样就让使用者只用提供数据（data），剩下的都是组件的事情。

开箱即用

直接引入组件就可以使用G6能力，填入数据即可渲染。

import { LineageSimpleGraph } from '@alipay/lineage-graph';

<LineageSimpleGraph
  data={data}
  width={600}
  graphOption={{ layout: { type: 'random' } }}
/>

多种内置布局

内置多种默认布局，适应多种场景下的布局需求：

基于力导的布局 - LineageForceGraph

此布局适用于在数据没有明显的多层依赖关系，而且数据量比较大的时候，可以更快的通过边链接作为聚合依据，来发现数据之间的联系。

基于Sugiyama算法的多层树布局 - LineageSugiyamaGraph

    Sugiyama算法是一个对于有向无环图的布局算法，它旨在让图布局中实现更少的边重合，让节点分布的更加平均，是一种基于层次的布局。通过分层后的图，可以在使用不同的算法后，让图的布局更有目的性。他分为朴素算法，最长路径算法，Coffman Graham并行算法，可以通过props中的mode设置。

• 朴素算法 - mode="Simplex" : 通过最简单的概念，将图根节点和叶子节点尽量平排分布，中间插入虚拟层数让整个图显得更加整齐。

• 最长路径算法 - mode="LongestPath" ：使用最长路径来作为树的开始和结束，这样可以避免大量中间节点不合理堆积的情况。

• Coffman Graham并行算法 - mode="CoffmanGraham"： CoffmanGraham路径算法是一个基于层数来进行优先度排序的算法，可以有效的并行分散布局

基于拓扑排序的布局 - LineageToplogicalGraph

对图进行有序层数的拓扑排序，最终展示出图的以来关系，拓扑布局可以一眼对于图的层数关系有个直接了解，而且布局横铺，更适合多层但是布局空间不大的场景。

可拓展

在组件集成的时候，保留了入口，让用户可以使用G6大部分原生功能，保留了一个Option和一个钩子函数，
GraphOption传入G6Graph初始化的option，可以使用G6已有的功能，还提供了graphWillRender(graph, data)（——来进行各种graph的事件监听，图操作，可以保存graph的本身。
并且，如果有新的布局，可以通过组件本身来拓展。

import { LineageGraph } from '@alipay/lineage-graph/src/common';

function LineageNewGraph (props) { 
	return LineageGraph(props, (graph, data) => {
  	// layout data
    
    graph.data(data)
    graph.render();
  })
}

组件简介

使用

tnpm install --save @alipay/lineage-graph

import {LineageForceGraph, LineageSugiyamaGraph, LineageToplogicalGraph, LineageSimpleGraph} from ' @alipay/lineage-graph';

/** LineageSimpleGraph 不包含布局算法 **/

Props

prop	type	描述	default
style	CSSProperties	渲染节点的style
className	string	渲染节点的className
width	number / string	图宽	600
height	number / string	图高	400
data	{nodes: node[], edges: edge[]}	数据，参考G6数据格式
colorMap	{[type: string]: string}	节点类型到颜色的对应map
nodeType	"defalt"	"rect"	"small"
drag	boolean	是否开启拖拽画布	true
zoom	boolean	是否开启滚轮缩放画布	true
tooltip	string	tooltip显示的key	"id"
handleNodeClick	function	点击节点回调
handleNodeDBClick	function	点击节点回调
graphOption	G6GraphOption	原生G6的Option，覆盖以上所有属性
graphWillRender	function(graph, data)	图在布局前的钩子
mode	"Simplex"	"LongestPath"	"CoffmanGraham"

构成

该组件的方案是采用一个基础的组件生成器LineageGraph，通过传入LayoutFunction，按需加载各个布局库，做到布局函数的剪枝，并且各个布局函数依赖的库也不会互相影响。