2012-06-04 106 views
6

我正在尋找一個庫來可視化網絡。JavaScript網絡可視化?

我只需要添加一些節點(節點上有文字),在它們之間添加邊緣(邊緣被定向並在文字上)。我不想手動設置任何東西的位置。

我想API簡單:

var node1 = X.addNode(1, "Hello"), 
    node2 = X.addNode(2, "World"); 
X.addEdge(node1, node2, "helloworld"); 

我搜索了幾個小時,看了之後arborjs,sigma.js,d3.js,JavaScript的InfoVis工具包,他們都不能讓我滿意。

還有什麼我可以嘗試嗎?

+0

相關的,如果沒有一個重複:https://stackoverflow.com/questions/10886705/javascript-network-visualization和https://stackoverflow.com/questions/ 8749706 /網絡圖-使用JavaScript的 – SherlockEinstein

回答

2

sigma.js有什麼問題?圖書館的網站上有一個很簡單的例子來繪製節點和邊緣:

var sigRoot = document.getElementById('sig'); 
var sigInst = sigma.init(sigRoot); 
sigInst.addNode('hello',{ 
label: 'Hello', 
color: '#ff0000' 
}).addNode('world',{ 
label: 'World !', 
color: '#00ff00' 
}).addEdge('hello_world','hello','world').draw(); 
3

我們生產mxGraph,但請注意,這是一個商業圖書館,而不是開源。我不確定爲什麼你列出的開源庫失敗了,但肯定會形成圖形,設置幾何圖形和標籤都是相當平凡的函數調用。

0

試用cne-tnetwork。這是JavaScript可視化庫來創建和繪製網絡圖。它基於SVG和HTML 5兼容。它在github上公開發布,根據GNU Afferro許可證授權。您可以在庫的readme中找到如何使用它。它有一個拖動節點的模式。節點之間的鏈接可以是單向的,雙向的甚至是連接多個元素的「總線」。使用CSS,您可以自定義您的所有樣式(節點,鏈接,箭頭,總線...)。

2

我發現這個JavaScript庫是有幫助的。退房的網絡範例頁:

visjs