Home

Awesome

血缘图

用于表示表与表之间,表和其他关联实体之间关系的图

demo preview

English | 简体中文

✨ 特性

使用

$ npm install react-lineage-dag@2.x

import LineageDag from 'react-lineage-dag';
// 需要引入样式
import 'react-lineage-dag/dist/index.css';

const data = {
  columns: [{
    key: 'name',
    primaryKey: true
  }, {
    key: 'title',
  }],
  tables: [
    {
      id: '1',
      name: 'table-1',
      fields: [
        {
          name: 'id',
          title: 'id'
        },
        {
          name: 'age',
          title: 'age'
        }
      ]
    },
    {
      id: '2',
      name: 'table-2',
      fields: [
        {
          name: 'id',
          title: 'id'
        },
        {
          name: 'age',
          title: 'age'
        }
      ]      
    },
    {
      id: '3',
      name: 'table-3',
      fields: [
        {
          name: 'id',
          title: 'id'
        },
        {
          name: 'age',
          title: 'age'
        }
      ]      
    }    
  ],
  relations: [
    {
      srcTableId: '1',
      tgtTableId: '2',
      srcTableColName: 'id',
      tgtTableColName: 'age'
    },
    {
      srcTableId: '1',
      tgtTableId: '3',
      srcTableColName: 'id',
      tgtTableColName: 'age'
    }
  ]
}

const App = () => {
  return (
    <LineageDag {...data} />
  )
}

Props

属性名属性类型默认值说明
widthnumber100%画布宽度
heightnumber100%画布高度
tablesITable[][]节点数据,具体描述位于表格下方
relationsIRelation[][]线段数据,具体描述位于表格下方
columncolumn[][]列的属性配置(和antd table的column概念相似),具体描述位于表格下方
centerIdstringundefined中心点,当中心点发生变化时,画布会聚焦此中心点
operatoroperator[][]每个节点上的操作按钮渲染配置,具体描述位于表格下方
classNamestringundefined画布类名
actionMenuaction[][]右上角操作按钮(放大、缩小、居中),具体描述位于表格下方
configconfig{}画布配置,具体描述位于表格下方
onLoadedFunctionnoopbutterfly加载完毕时
  interface ITable {
    id: string;                 // 表ID
    name: string;               // 表名(显示名)
    isCollapse: boolean;        // 是否折叠所有列
    fields: []                  // 列数据
  }

  interface IRelation {
    id?: string;                 // 关系ID,非必填,建议填写
    srcTableId: string;          // 源表格ID
    tgtTableId: string;          // 目标表格ID
    srcTableColName: string;     // 源表字段名
    tgtTableColName: string;     // 目标表字段名
  }

  interface operator {
    id: string;                  // 按钮唯一标识
    name: string;                // 按钮中文名
    icon: JSX.Element            // 操作项渲染
    onClick: (node: any): void   // 按钮点击事件
  }

  interface column {
    key: string,                                              // 列的唯一标识
    width?: number,                                           // 列的宽度
    primaryKey: boolean,                                      // 这列的key对应的value是否作为键值对,与antd中的column的primaryKey概念对应
    render?(text: any, record: any, index: number): void      // 列渲染的方法
  }

  interface config {
    delayDraw: number; // 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染,否则坐标都产生偏移,如:antd的
    titleRender?: (title: string, node:any) => void; // 自定义节点的title render
    showActionIcon?: boolean,                        // 是否展示操作icon:放大,缩小,聚焦
    enableHoverChain: boolean,                       // 是否开启hover高亮链路
    minimap?: {                                      // 是否开启缩略图
      enable: boolean,
      config: {
        nodeColor: any
      }
    }
  }

Dev

# clone 本项目后
$ npm install
$ cd example
$ npm install
$ npm start