Datag-graph NPM

DataG-Graph

前端图形渲染组件

npm.io

特性

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

例子

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

@antv/graphin @antv/graphin-components @antv/graphin-icons jquery lodash tslib

@everything-registry/sub-chunk-1446

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago