DataG-Graph

前端图形渲染组件

特性

• 自定义节点渲染样式
• 网状节点渲染
• 节点事件响应
• 小地图
• 自动布局
  • 力导向布局
  • 环形布局
  • 重力布局

例子

• React：参见目录下 example
• Vue: 参见目录下 vue-example

Props

属性名	属性类型	默认值	说明
data	IData	{}	定义往下看
layout	Object	{type: 'concentric'}	布局类型参见下方表格
minimap	Boolean	true	是否打开小地图
dragble	Boolean	true	节点是否可拖拽
moveable	Boolean	true	画布是否可移动
onNodeClick	Function	noop	节点点击函数
onCanvasClick	Function	noop	画布点击函数
onEdgeClick	Function	noop	边点击函数
onNodeDrag	Function	noop	节点拖动函数
graphRef	Object	{ updateItem: (item, cfg) => {} }	graph实例引用
minimapTopRight	Object	{ top: 0, right: 0 }	控制小地图的位置
didMount	Function	获取Graph内部的graph用来操作node节点与edges线条的样式
theme	Object	设置主题 https://graphin.antv.vision/graphin/render/theme

    // 数据类型
    interface IData {
        nodes: {
            id: string;         // 节点ID
            label: string;      // 节点文字
            type: string;       // 节点类型: graphin-circle(圆形) 
            style: IStyle       // graphin-circle（原型） rect（方形）
        }[],
        edges: {
            target: string;     // 目标节点ID
            source: string;     // 源节点ID
            style: IStyle       // 边类型
        }[]
    }

    interface IStyle {
        keyshape: {
            stroke: string; // 边颜色
            fill: string;   // 填充颜色
        },
        label: {
            value: string;  // 文字内容
            stroke: string; // 文字颜色
        }
    }

布局取值

取值	含义	其他
concentric	同心圆布局
graphin-force	重力布局
radial	辐射布局
dagre	分层布局
circular	环形布局

开发

$ make install && npm start # 这个命令帮助启动 vite

构建

$  npm run build