d3-topo

d3-topo

基于D3-Force力导向图实现和封装的拓扑图绘制工具

安装

npm install d3-topo

在main.js按如下方式引入

import d3Topo from 'd3-topo';
Vue.use(d3Topo);

使用时，通过<d3-topo></d3-topo>标签引入拓扑组件

功能

1. 展示节点之间的连线关系
2. 支持缩放、平移和双击重置功能
3. 提供节点、链路、空白处的点击事件，供父组件自定义交互效果
4. 支持扩展工具栏和小地图

使用说明

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数据变化后，拓扑会自动重绘刷新

• toolbarRender： [
   {
    id: String //按钮ID
    icon: String //按钮图标的iconfont样式名
    text: String //按钮名称
    key: String //快捷键，单个字母
    disabled: Boolean //按钮是否禁用，默认否
    fn: Function(e: event事件) //按钮点击事件
   }
   ……
  ]
  

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属性（即更改标签或在线状态）。但仅提供了单个修改的方法