Sigma.js在他们的
GitHub上列出了几个
examples,但是从他们那里不清楚加载一个插件是需要的.
我已经尝试简单地包括< script>指向插件的JavaScript文件但没有起作用的标签.如何导入/使用/ copypaste插件到我的网站？
解决方法
首先,包括您需要的sigma文件：
<script src="sigma/sigma.concat.js"></script> <script src="sigma/plugins/sigma.parseGexf.js"></script> <script src="sigma/plugins/sigma.forceatlas2.js"></script>
然后开始你的脚本
<script type="text/javascript">
function init() {
// Instanciate sigma.js and customize rendering :
sigInst = sigma.init(document.getElementById('graph')).drawingProperties({
defaultLabelColor: '#fff',defaultLabelSize: 14,defaultLabelBGColor: '#fff',defaultLabelHoverColor: '#000',labelThreshold: 6,defaultEdgeType: 'curve'
}).graPHProperties({
minNodeSize: 2,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('getgefx.PHP');
sigInst.bind('downnodes',function(event){
var nodes = event.content;
var neighbors = {};
sigInst.iterEdges(function(e){
if(nodes.indexOf(e.source)>=0 || nodes.indexOf(e.target)>=0){
neighbors[e.source] = 1;
neighbors[e.target] = 1;
}
}).iterNodes(function(n){
if(!neighbors[n.id]){
n.attr['temphidden'] = 1;
n.attr['oldcolor'] = n.color;
// var c = sigma.tools.getRGB(n.color);
n.color = "#eee"; // #ccc";
// n.color = "rgba("+c['r']+","+c['g']+","+c['b']+",0.2)";
}
}).draw(2,2,2);
}).bind('upnodes',function(){
sigInst.iterNodes(function(n){
if(n.attr['temphidden'] == 1) {
n.color = n.attr['oldcolor'];
n.attr['temphidden'] = 0;
}
}).draw(2,2);
});
// Draw the graph :
sigInst.draw(2,2);
sigInst.startForceAtlas2();
var isRunning = true;
document.getElementById('stop-layout').addEventListener('click',function(){
if(isRunning){
isRunning = false;
sigInst.stopForceAtlas2();
document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';
}else{
isRunning = true;
sigInst.startForceAtlas2();
document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';
}
},true);
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",init,false);
} else {
window.onload = init;
}
</script>
