1.1.5 • Published 4 years ago
d3-topo v1.1.5
d3-topo
基于D3-Force力导向图实现和封装的拓扑图绘制工具
安装
npm install d3-topo
在main.js按如下方式引入
import d3Topo from 'd3-topo';
Vue.use(d3Topo);使用时，通过\\标签引入拓扑组件
功能
- 展示节点之间的连线关系
- 支持缩放、平移和双击重置功能
- 提供节点、链路、空白处的点击事件，供父组件自定义交互效果
- 支持扩展工具栏和小地图
使用说明
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| topoData | 必填。拓扑图的数据对象，包含节点和链路。具体格式后续介绍 | Object | - |
| nodeLabel | 定义节点标签显示的内容。id/ip/name，三个配置中选一个，默认是节点名称 | String | name |
| loading | 加载中。若数据还在查询中，该值可设置为true | Boolean | false |
| toolbarRender | 插件中自带工具栏样式，若传入该配置，拓扑图右上角 将解析显示出一排工具按钮。具体格式后续介绍 | Array | - |
| thumb | 是否显示缩略小地图。默认不显示 | Boolean | false |
| thumbStyle | 支持修改小地图样式 | Object | - |
| allowRightClick | 是否支持右键点击事件。默认关闭右键事件，若想定义右键菜单，需开启此项 | Boolean | false |
- topoData： { nodes: { id: String //节点标识，必配项 name: String //节点名称 ip: String //节点IP地址 status: String //节点在线状态。up=在线，down=离线 } …… , links: { id: String //链路标识，必配项 name: String //链路名称 source: String/Number //链路源节点id或索引值 target: String/Number //链路宿节点id或索引值 } …… }
链路的源宿节点通过source和target标识。d3-force内部会根据节点id或者是在节点数组中的索引找到该节点对象，然后把链路数据的source和target替换成对应的节点对象
topoData数据变化后，拓扑会自动重绘刷新
Events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| node-select | 节点选择事件。点中节点时触发该事件，可用于实现选中高亮、打开节点属性面板等效果 | (node, e)node: 选中的节点数据对象e: 鼠标事件对象 |
| link-select | 链路选择事件。点中链路时触发该事件 | (link, e)link: 选中的链路数据对象e: 鼠标事件对象 |
| click-blank | 空白点击事件。点中空白位置后触发该事件，可以在此时取消选中高亮或关闭面板等 | e: 鼠标事件对象 |
| right-click | 鼠标右键事件。右键点击拓扑后触发该事件，可用于打开右键菜单栏 | 若右键节点、链路，返回值如下：{ type: 'node/link' data: 节点、链路数据对象 event: 鼠标事件对象}若右键空白，返回值是null |
| drag-end | 节点拖拽结束后的事件 | 节点数据对象 |
| draw-callback | 拓扑图的DOM树绘制完毕后的回调，此时已经可以对DOM执行一些操作 | - |
| tick-stop | d3-Force力导向图的力学抖动事件结束时的回调，此时节点坐标基本计算完毕不会再抖动 | - |
对外暴露的数据和函数
- nodes: Array //拓扑图的节点数据
- links：Array //拓扑图的链路数据
- updateNode: Function //更新节点数据。入参如下：
- type: String //更新类型ADD/UPDATE/DELETE
- nodes: Object //要更新的节点数据
- updateLink: Function //更新链路数据。入参如下：
- type: String //更新类型ADD/UPDATE/DELETE
- links: Object //要更新的链路数据
拓扑组件支持动态增删节点，或者是更新节点的ip、name、status属性（即更改标签或在线状态）。但仅提供了单个修改的方法