生活随笔
收集整理的這篇文章主要介紹了
visjs使用小记-1.创建一个简单的网络拓扑图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.插件官網：http://visjs.org/?
2.創建一個簡單的網絡拓撲圖
<!doctype html>
<html>
<head><title>Network
</title><script type="text/javascript" src="http://visjs.org/dist/vis.js"></script><link href="http://visjs.org/dist/vis-network.min.css" rel="stylesheet" type="text/css"/><style type="text/css">#mynetwork {width: 600px;height: 400px;border: 1px solid lightgray;}</style>
</head>
<body><p>創建一個簡單的網絡拓撲圖.
</p><div id="mynetwork"></div><!-- 用戶存放拓撲圖的容器--><script type="text/javascript">
//定義需要生成的節點
var allnodes = [{id: 1, label: 'Node 1', title: 'I have a popup 1!'},{id: 2, label: 'Node 2', title: 'I have a popup 2!'},{id: 3, label: 'Node 3', title: 'I have a popup 3!'},{id: 4, label: 'Node 4', title: 'I have a popup 4!'},{id: 5, label: 'Node 5', title: 'I have a popup 5!'},{id: 6, label: 'Node 6', title: 'I have a popup 6!'},{id: 7, label: 'Node 7', title: 'I have a popup 7!'},{id: 8, label: 'Node 8', title: 'I have a popup 8!'},{id: 9, label: 'Node 9', title: 'I have a popup 9!'},{id: 10, label: 'Node 10', title: 'I have a popup 10!'}];
//定義節點連接線
var alledges = [{id: 'a',from: 1, to: 2,title: 'test12!'},{id: 'b',from: 1, to: 3,title: 'test13!'},{id: 'c',from: 1, to: 4,title: 'test14!'},{id: 'd',from: 3, to: 4,title: 'test34!'},{id: 'e',from: 2, to: 5,title: 'test25!'},{id: 'f',from: 2, to: 6,title: 'test26!'},{id: 'g',from: 2, to: 7,title: 'test27!'},{id: 'h',from: 3, to: 7,title: 'test37!'},{id: 'i',from: 4, to: 8,title: 'test48!'},{id: 'j',from: 8, to: 9,title: 'test89!'},{id: 'k',from: 8, to: 10,title: 'test8to10!'}];// 創建節點對象var nodes = new vis.DataSet(allnodes);// 創建連線對象var edges = new vis.DataSet(alledges);// 創建一個網絡拓撲圖var container = document.getElementById('mynetwork');var data = {nodes: nodes,edges: edges};var options = {interaction:{hover:true}};var network = new vis.Network(container, data, options);</script></body>
</html> 文章轉自：https://blog.csdn.net/onlyjin/article/details/76673686
轉載于:https://www.cnblogs.com/crystaltu/p/9177595.html
總結
以上是生活随笔為你收集整理的visjs使用小记-1.创建一个简单的网络拓扑图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
