vis.js的研究之路

把vis.js官网的知识点(我自己用到的)按照自己的理解做一个总结

1.最基本的线路图

<!doctype html>
<html>
<head><title>Network | Basic usage</title><script type="text/javascript" src="./plugins/vis-4.0/vis.js"></script><link href="./plugins/vis-4.0/vis.min.css" rel="stylesheet" type="text/css" /><style type="text/css">#mynetwork {width: 600px;height: 400px;border: 1px solid lightgray;}</style>
</head>
<body><div id="mynetwork"></div><script type="text/javascript">// create an array with nodesvar nodes = new vis.DataSet([{id: 1, label: 'Node 1'},{id: 2, label: 'Node 2'},{id: 3, label: 'Node 3'},{id: 4, label: 'Node 4'},{id: 5, label: 'Node 5'}]);// create an array with edgesvar edges = new vis.DataSet([{from: 1, to: 3},{from: 1, to: 2},{from: 2, to: 4},{from: 2, to: 5},{from: 3, to: 3}]);// create a networkvar container = document.getElementById('mynetwork');var data = {nodes: nodes,edges: edges};var options = {};var network = new vis.Network(container, data, options);
</script></body>
</html>

2.然后如果你想给个别节点改变颜色或形状的话

如果想给全部节点改变颜色或形状要在options中写（且上面的优先级高）

可以选择的形状有：

如果想把节点分类改变颜色或形状：

3.如果想给边添加箭头的话：

如果想改变边的颜色的话也是使用color属性即可，这里说一个比较实用的继承指定节点颜色的机制

有时我们需要在边上添加注释内容

4.如果你细心的话你会发现每次描绘的图形整体结构是有差异的，如果你不想让它老变的话可以这样做：

vis.js的研究之路相关推荐

vis.js入门_使用TensorBoard数据Vis的TensorFlow手术分类器入门
vis.js入门深度学习中最具挑战性的部分是标签,这将在由两部分组成的系列文章的第1部分中看到, 了解如何使用TensorFlow对图像进行分类 . 正确的培训对于将来进行有效分类至关重要,而要进行 ...
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
这里主要是针对vis的network图进行节点动态添加图用的是vis.js,表单使用的是element-ui 程序运行截图如下: 添加一个节点: 这里是不需要刷新页面就能添加的. 程序结构如下: 关 ...
李飞飞：我怎样走上AI研究之路
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达来源:cnbc 编辑:肖琴转载自:新智元 [导读]近日,李飞飞接受CNBC专访,针对AI未来的发展方 ...
vis.js网络拓扑图第一个demo，vis-network.min.js的下载
在vis.js的中文文档里有个demo,复制粘贴出来跑跑,是可以运行的地址:vis-network 入门 | Ame's blog 1.源码是这样的,粘贴出来就可以跑: //源码 <html& ...
vis.js network，基本教程
这两天用到vis,写一个拖拽的效果,发现vis类的博客文章都特别少,可能用的人还不是特别的,vis目前没有中文文档,英文不好的同学可能有些头痛了,今天我给大家分享一下vis等经验. 1.第一步,先下载 ...
vis.js network 教程二 edges
arrows:箭头 arrows.to:箭头指向 arrows.to.enabled:箭头开关,如果设置为true,则显示关系末端增加箭头 arrows.to.scaleFactor:修改箭头大小 a ...
vis.js中timeliness的中文化
vis.js的官网中这部分写的不是很清楚,只提到了timeliness的本地化是基于moment.js,如果需要自定义,需要引入moment.js,或者使用moment.js包装好的本地化文件mome ...
vis.js network 教程一
我们使用visjs的网络图可以实现类似csdn知识库的功能. 首先我们先看一个官方的demo: <%@ page contentType="text/html;charset=UTF- ...
基于vis.js的动态流量的封装
分享关于vis.js的动态流量的封装,是基于网上在github中vis.js的issues一位大神分享的代码的基础上继续做了部分改动封装效果是一个小球在需要动态流量的连接线上滚动,颜色大小方向都可以 ...

vis.js的研究之路

vis.js的研究之路相关推荐

最新文章

热门文章