2012-05-30 47 views
1

为了可视化节点图,Sigma.js看起来很棒。我尝试了一些例子,但无法显示我的图形。我使用了示例代码并尝试插入我的.gexf文件,但没有显示任何内容。这是我从Sigma.js example了:.gexf -format节点图可视化与Sigma.js

function init() { 
    // Instanciate sigma.js and customize rendering : 
    var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({ 
    defaultLabelColor: '#fff', 
    defaultLabelSize: 14, 
    defaultLabelBGColor: '#fff', 
    defaultLabelHoverColor: '#000', 
    labelThreshold: 6, 
    defaultEdgeType: 'curve' 
    }).graphProperties({ 
    minNodeSize: 0.5, 
    maxNodeSize: 5, 
    minEdgeSize: 1, 
    maxEdgeSize: 1 
    }).mouseProperties({ 
    maxRatio: 32 
    }); 

    // Parse a GEXF encoded file to fill the graph 
    // (requires "sigma.parseGexf.js" to be included) 
    sigInst.parseGexf('donornet.gexf'); 

    // Draw the graph : 
    sigInst.draw(); 
} 

if (document.addEventListener) { 
    document.addEventListener("DOMContentLoaded", init, false); 
} else { 
    window.onload = init; 
} 

我更换了.gexf文件用我自己的donornet.gexf文件并将其保存为donornet.js。然后我用代码从这个example(从Max De Marzi),我与我的donornet.js文件替代:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>Donornet and Sigma.js Example</title> 
    <script type="text/javascript" src="sigma.min.js"></script> 
    <script type="text/javascript" src="sigma.parseGexf.js"></script> 
    <script type="text/javascript" src="sigma.forceatlas2.js"></script> 
    <link type="text/css" rel="stylesheet" href="neo_sigma.css"/> 
    </head> 
    <body> 
    <h1>Donornet and Sigma.js Example</h1> 
     <div class="buttons-container"> 
     <button class="btn" id="stop-layout">Stop Layout</button> 
     <button class="btn" id="rescale-graph">Rescale Graph</button> 
    </div> 
     <div class="span12 sigma-parent" id="sigma-example-parent"> 
    <div class="sigma-expand" id="sigma-example"></div> 
    </div> 
    <script type="text/javascript" src="donornet.js"></script> 
    </body> 
</html> 

所有文件都在同一个文件夹中。 parseGexf.js与donornet.js和donornet.gexf位于同一个文件夹中。

回答

2

您不必将.gexf文件另存为.js文件。只需将其保留为gexf文件并将其上载到脚本的文件夹即可。用<script src="donornet.js">删除该行。尝试再次运行。如果它不起作用,请移除按钮div。看看http://noduslabs.com/socialplayer/smmrussia/

+0

惊人的来源。谢谢。 – crock1255

+1

想要再次说声谢谢。这些例子真的很有帮助,我已经开始运行了。仍然有一些错误需要解决 - 比如当我从一个节点链接时,当我回到图表时,它似乎陷入了僵局,但我最终会解决这个问题。再次感谢你! – crock1255

+0

快乐为你服务!你到底在建什么?有没有机会在网上看到它? ) –