# d3-topo
> a plugin for de-force topo
Latest version **1.1.5** (published 2020-04-01) · MIT license · 0 weekly downloads
## Install
```sh
npm install d3-topo
pnpm add d3-topo
yarn add d3-topo
bun add d3-topo
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.5 |
| Published | 2020-04-01 |
| First published | 2020-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mhcai |
| Maintainers | mhcai |
## Links
- npm: https://www.npmjs.com/package/d3-topo
- npm.io page: https://npm.io/package/d3-topo
## Recent versions
- 1.1.5 (latest) — 2020-04-01
- 1.1.4 — 2020-03-11
- 1.1.3 — 2020-03-11
- 1.1.2 — 2020-03-11
- 1.1.1 — 2020-03-09
- 1.0.1 — 2020-02-18
## README
# d3-topo
基于D3-Force力导向图实现和封装的拓扑图绘制工具
## 安装
npm install d3-topo
在main.js按如下方式引入
```
import d3Topo from 'd3-topo';
Vue.use(d3Topo);
```
使用时，通过\\标签引入拓扑组件
## 功能
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属性（即更改标签或在线状态）。但仅提供了单个修改的方法
---
_Source: https://npm.io/package/d3-topo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._