实现的功能

节点信息图片展示

连线信息展示

连线动画效果

节点拖拽

缩放

移入节点展示更多信息

动态修改数据展示（包括添加和删除），修改vuedevtools试试看吧

因为公司内网的原因，不能照搬所有代码，只能实现部分。还有折叠，高亮，视图聚焦移动等，可以看看D3的示例。

感谢

巨人的肩膀。我是根据大佬的实现，进行了一些封装优化，我用的是最新的D3版本。

代码仓库

d3-topo

预览地址

d3-topo

一些功能的实现，详细请看源码

render函数

  render() {this.container = this.svg.append("g").attr("class", "graph");this.init();// 每次迭代必须调用修改节点和边的位置this.force.on("tick", () => {this.initLinksPosition();this.initNodesPosition();});}init() {this.initForce(); //初始化力模型this.initMarker(); //初始化连线箭头this.initLinks(); //连线需要在节点之前，否则会盖住this.initNodes(); //初始化节点this.initDrag(); //初始化节点拖拽this.initZoom(); //初始化缩放this.initNodeHover(); //初始化hover节点信息展示}

初始化force

  initForce() {this.force = d3.forceSimulation(this.nodes).alpha(this.alpha) //力迭代次数[0,1]，越大布局越好.force("charge",d3.forceManyBody().strength(this.strength).distanceMax(this.distanceMax)) //strength节点之间引力，负值越大分的越开。distanceMax连线距离.force("link", d3.forceLink(this.links)).force("center", d3.forceCenter(this.width / 2, this.height / 2)); //布局中心点}

边箭头

  initMarker() {this.svg.append("marker").attr("id", "resolved").attr("markerUnits", "userSpaceOnUse").attr("viewBox", "0 -5 10 10") //坐标系的区域.attr("refX", 12) //箭头坐标.attr("refY", 0).attr("markerWidth", 12) //标识的大小.attr("markerHeight", 12).attr("orient", "auto") //绘制方向，可设定为：auto（自动确认方向）和 角度值.attr("stroke-width", 2) //箭头宽度.append("path").attr("d", "M0,-5L10,0L0,5") //箭头的路径.attr("fill", "#6cbfed"); //箭头颜色}

拖拽

  initDrag() {let _this = this;this.graphNodes.call(d3.drag().on("start", dragStart).on("drag", dragging).on("end", dragEnd));function dragStart(d) {if (!d.active) _this.force.alphaTarget(0.2).restart();}function dragging(d) {d.subject.x = d.x;d.subject.y = d.y;}function dragEnd(d) {if (!d.active) _this.force.alphaTarget(0);}}

缩放

  initZoom() {// scaleExtent缩放范围let _this = this;this.svg.call(getZoom()).on("dblclick.zoom", null);//禁止双击放大function getZoom() {return (_this.zoom = d3.zoom().scaleExtent([0.05, 8])//缩放大小限制.on("zoom", (d) => {d3.select("g.graph").attr("transform", function () {return `translate(${d.transform.x},${d.transform.y}) scale(${d.transform.k})`;});}));}}

更新 reRender函数。更新千万不要append，要用select，否则更新一次，节点多一倍

  reRender() {this.reInitLink();this.reInitNode();this.force.nodes(this.nodes);this.force.force("links", d3.forceLink(this.links));this.force.alpha(this.alpha).alphaDecay(this.alphaDecay).restart();}

扩展

我最后没有用D3去实现拓扑图可视化的展示。因为我们需要minimap展示，但是我写不出来

d3实现网络拓扑图可视化展示，动态修改数据相关推荐

基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址) 前言演示地址下载地址 Demo示例(部分) 1.总览 2.物流信息展示 3.车辆综合管控平 ...
elementui 双击el-table表格展示输入框修改数据
参考:element ui 双击表格展示输入框修改数据_7ing酒的博客-CSDN博客_双击输入框展示: 功能:就是一个简单的table表格通过双击某一项进行修改.(其实就是双击之后变成一个in ...
微信小程序动态修改数据 list展示
前沿我想实现一个动态修改data内数据的功能,试验了几种方式,感觉下面的这种方式最实用,所以记录一下.方便后面的小伙伴来学习. 代码 js文件代码:Page({data: {artlist: []} ...
d3之网络拓扑图进阶
重点:理解力布局与数据.图形的关系,力布局最初用来实现力导向图,它是基于基本苇尔莱积分法对粒子运动的模拟,D3实现了一种数值方法,这种数值方法在粒子级别模拟了简单约束下的牛顿运动方程,其约束条件表示了 ...
小程序Swiper组件做日历（周历）左右滑动动态修改数据
使用Swiper做一个周日历功能,要求滑动swiper时,可以显示上一周/下一周的日期. 一开始设想的是使用二维数组存放3个周的日期,右滑时push接下来的周,然后shift第一项,左滑反之,试了几种 ...
动态修改数据窗口的数据源
... dw_1.dataobject=d_prdtorder_view_cust ... if ls_refno<>"" then dw_1.dataobject= ...
PB 动态修改数据窗口下拉框的值（DropDownListBox）
GIF:效果图源码: string ls_value,ls_colnamels_colname = 'a' //字段名称//如果字段不是DropDownListBox下拉框,需要改变Edit中的St ...
实战 | 用Python爬取《云南虫谷》3.6万条评论，并做数据统计可视化展示分析，好看！...
最近鬼吹灯系列网剧<云南虫谷>上线,作为鬼吹灯系列作品,承接上部<龙岭迷窟>内容,且还是铁三角原班人马主演,网友直呼非常好看! 今天,我们就用Python爬取目前全部剧集的评论 ...
实战|用Python爬取《云南虫谷》3.6万条评论，并做数据统计可视化展示分析，好看！
大家好,我是才哥. 最近鬼吹灯系列网剧<云南虫谷>上线,作为鬼吹灯系列作品,承接上部<龙岭迷窟>内容,且还是铁三角原班人马主演,网友直呼非常好看! 今天,我们就用Python爬 ...

d3实现网络拓扑图可视化展示，动态修改数据

实现的功能

感谢

代码仓库

预览地址

一些功能的实现，详细请看源码

扩展

d3实现网络拓扑图可视化展示，动态修改数据相关推荐

最新文章

热门文章