分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 如何“插入”sigma.js的插件？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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>