vis.js力导向图第三弹——双击扩展节点

正经学徒，佛系记录，不搞事情

基于上文：https://blog.csdn.net/qq_31748587/article/details/84143153 的项目

不能扩展节点的图是没有灵魂的，vis扩展节点比较简单，只需要追加节点和关系即可

首先定义一个变量数组nodeExtendArr，表示已扩展的节点

监听双击事件

network.on("doubleClick", function(params) {//双击事件if (params.nodes.length != 0) {//获取需要的参数，获取参数后可到后台获取扩展后的数据var id = network.body.data.nodes._data[params.nodes[0]].id;if(nodeExtendArr.indexOf(id) != -1){layer.msg("该节点已经扩展");}else{//每个节点只能扩展一次,nodeExtendArr记录已扩展的节点nodeExtendArr.push(id);//模拟后台获取扩展后的节点param = {nodes:[{id: 'extendNode1'+id,label: '老吴',image:'image/man.png'},{id: 'extendNode2'+id,label: '老吴',image:'image/man.png'}],edges:[{id: 'extendEdge1'+id,fromNodeId: id,toNodeId: 'extendNode1'+id,label:'新扩展节点'},{id: 'extendEdge2'+id,fromNodeId: id,toNodeId: 'extendNode2'+id,label:'新扩展节点'}]}createNetwork(param);}}
});

最终效果：

项目地址：

https://pan.baidu.com/s/1_BhLZBus08Jn8Eb87IqLIg 提取码: ye63

vis.js力导向图第三弹——双击扩展节点相关推荐

d3.js力导向图使用详解
创建一个力导向图需要三个东西: 仿真模拟系统节点力当然,一般我们也会创建links(边)来连接两个节点,例如上图仿真模拟系统中存在多个节点和多种类型的力,通过力控制节点的运动,每个节点都在多个 ...
echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能
摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能前言在上篇文章中(D ...
D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
d3 svg path添加文本_D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...
d3.js 力导向图关系连接线使用 path 标签时不显示的问题
由于d3.js版本差异,再用d3开发力导向图时,使用path标签时可能会出现不显示的问题,特记录该问题. // links 连接线设置,使用path标签 _this.links = g.append( ...
python力导向图论文_力导向图（关系图） echarts的运用
Echarts关系图-力引导布局需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts For ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...

vis.js力导向图第三弹——双击扩展节点

vis.js力导向图第三弹——双击扩展节点相关推荐

最新文章

热门文章