0.0.7 • Published 3 years ago
datag-graph v0.0.7
DataG-Graph
前端图形渲染组件
特性
- 自定义节点渲染样式
- 网状节点渲染
- 节点事件响应
- 小地图
- 自动布局
- 力导向布局
- 环形布局
- 重力布局
例子
React：参见目录下exampleVue: 参见目录下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