网络-visNetwork包绘制炫酷的动态网络图

网络-visNetwork包绘制炫酷的动态网络图,第1张

注: 这些设置只是针对单个节点或着边;全局所有点或者节点设置需要使用visNodes 或 visEdges。

在node data.frame上添加更多变量。有关可用选项,请参阅visNodes()参数。

示例:

在edges data.frame上添加更多变量。有关可用选项,请参阅visEdges()参数。

示例:

你也可以选择节点的id/标签与一个列表与nodesIdSelection:

使用selectedBy选项通过列的值选择一些节点:

vis.js 提出了一些导航工具:

Itroduction to visNetwork

visNetwork

系列文章:

R语言进行网络分析的基础包 igraph

networkD3 绘制动态网络

近期需要实现一个网络拓扑图,可拖动,添加节点,添加关联;网上搜罗一下,学习一下网上的开源内容,找到了这个还不错的插件: Vis ;我看网上对这个的材料不是很多,特此写一篇,希望能帮助到大家

首先上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/


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11492247.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存