如何自定义网络拓扑图(d3)

代码已实现,封装中。。。

功能如下:

  1. 展示节点信息,包含节点名称、子节点数量、节点状态、告警数量。
  2. 节点之间的关联可以选择是否展示箭头,箭头样式可以自定义。
  3. 节点点击事件。点击节点名称,可以查看节点详情;点击节点展开图标,可以展开或者隐藏下游节点;悬浮出现“+”图标,点击可以展示关联内容。
  4. 鼠标悬停对象图标上方,本图标和所关联对象之间的线条高亮,并显示两者关系。
  5. 鼠标按住对象图标,可对图标进行拖动,松开鼠标则停止拖动。
  6. 鼠标按住空白处,可进行页面拖动,松开鼠标则停止拖动。
  7. 点击展示框右上角图标,可页面全屏展示。
  8. 支持缩放,可以滚轮缩放,也可拖动左侧缩放框进行页面缩放。
  9. 支持导出PNG图片或PDF文档。

其他可配置项:

  1. 支持节点名称文字大小,颜色修改
  2. 图标自定义
  3. 箭头自定义
  4. 线条长度自定义
  5. ...

你可能感兴趣的:(前端)