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