首先上Vis文档: https://visjs.github.io/vis-network/docs/network/index.html
Vis包含了很多内容,本文只使用network这一部分;使用的是vue + Ts + Vis 来实现网络拓扑;
Vis里面有几个关键的方法:
第一个方法:vis.DataSet: 用来转换成network的接受的值;
随后 要对画布进行事件的监听:
selectNode是选择节点,让节点处于高亮状态;
添加节点 *** 作:就是调用networkDateSet.node里面的add 方法:可以自动添加,同理边也是如此,但是要保证节点和边的id都是唯一的;
大致是这样:我这也是想到哪写到哪 ,没有啥逻辑可言 ,希望能帮上有需要的人;
附上:官网的demo之一 可借鉴的东西听多 http://jsfiddle.net/api/post/library/pure/
注: 这些设置只是针对单个节点或着边;全局所有点或者节点设置需要使用visNodes 或 visEdges。
在node data.frame上添加更多变量。有关可用选项,请参阅visNodes()参数。
示例:
在edges data.frame上添加更多变量。有关可用选项,请参阅visEdges()参数。
示例:
你也可以选择节点的id/标签与一个列表与nodesIdSelection:
使用selectedBy选项通过列的值选择一些节点:
vis.js 提出了一些导航工具:
Itroduction to visNetwork
visNetwork
系列文章:
R语言进行网络分析的基础包 igraph
networkD3 绘制动态网络
vue纵向时间轴可放大缩小需要使用D3.js。1、使用D3.js或vis.js等库创建纵向时间轴组件,并实现基本的显示和交互功能。
2、在组件中添加放大缩小功能的按钮或滑块,并绑定相应的事件处理程序。
3、在事件处理程序中,使用D3.js或vis.js等库提供的缩放功能,根据放大缩小的比例对时间轴进行缩放和平移 *** 作。
4、根据需要,可以使用CSS样式或其他技术对组件进行美化和优化。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)