g-topo
v1.0.6
Published
基于G6封装的可视化拓扑图插件
Downloads
14
Readme
GTopo
基于antv@g6封装的拓扑图插件,适用于网络拓扑图
version: 1.0.2
Author: LilyXu
Feature
封装了多种类型的节点和连线
zoomNode
type: 'zoom-node'
warningNode
type: 'warning-node'
playWarnNode
type: 'play-warn-node'
flowEdge
type: 'flow-edge'
flowInfoEdge
type: 'flow-info-edge'
flowWarnEdge
type: 'flow-warn-edge'
quadraticLabelEdge 支持多条边
edgeOffset: -20
type: 'quadratic-label-edge'
封装了自定义behavior-(self-contextmenu)右键菜单
- contextMenu可进行自定义
`
mode: { default: [ { type: 'self-contextmenu', contextMenu: { canvas: [ { type: 'addNode', text: 'add-node'}, { type: 'addEdge', text: 'add-edge'}], node: [ { type: 'updateNode', text: 'update-node'}, { type: 'deleteNode', text: 'delete-node'}], edge: [ { type: 'updateEdge', text: 'update-edge'}, { type: 'deleteEdge', text: 'delete-edge'}], } } ] }
`
封装了G6的一些比较繁琐的配置,也可基于需求修改配置文件
Use
npm install g-topo --save
oryarn add g-topo
使用插件必须传入一个dom元素,例如:
` import GTopo from 'g-topo' const network = new GTopo('#mountNode') `
Options
构造函数,construtor必须接收一个参数,当前绑定的dom元素,可选参数config。
const network = new GTopo('#mountNode', config)
config是一个对象,和G6的graph配置项api保持一致,只是进行了整合,可根据自身风格传参:
`
{ renderer // 渲染方式,支持canvas和svg,默认svg fitView // 是否开启画布自适应。开启后图自动适配画布大小 fitViewPadding // fitView 为 true 时生效。图适应画布时,指定四周的留白。 groupByTypes // 各种元素是否在一个分组内 autoPaint // 当图中元素更新,或视口变换时,是否自动重绘。 minZoom // 最大缩放比例 maxZoom // 最大缩放比例 pixelRatio // 像素比率 animate 是否启用全局动画 defaultNode // 默认状态下节点的配置 defaultEdge // 默认状态下边的配置 nodeStateStyles // 各个状态下节点的样式 edgeStateStyles // 各个状态下边的样式 layout // 默认是力导向布局, 传{}radom布局 modes // 默认有drag-node、tooltip、edge-tooltip、brush-select、zoom-canvas、self-contextmenu plugins // 数组, []表示没有默认,默认有minimap, grid }
`
方法
renderData(data)
读取数据并渲染图data的数据格式为:
`
data: { nodes: [], edges: [] }
`
updateData(data)
更新数据refreshData()
刷新数据updateLayout(cfg)
更新layout布局,参数为layout的配置项clear()
清除画布元素destory()
销毁画布addBehaviors(behaviors, modes)
添加behaviorremoveBehaviors(behaviors, modes)
删除behaviorchangeSize(width, height)
改变画布大小addPlugin(plugin)
添加指定的插件removePlugin(plugin)
移除指定的插件downloadImage
移除指定的插件setItemState(item, state, enabled)
设置元素状态clearItemStates(item, states)
清除元素状态,可以一次性清除多个状态refreshPositions()
当节点位置发生变化时,刷新所有节点位置,并重计算边的位置handleEvent(type, event, cb)
画布、节点、连线的操作 type支持canvas、node、edge, event:支持click、mouseover等getNodePosition()
获取所有节点的位置信息