7

Web インターフェイスで大規模なネットワーク グラフを視覚化したいと考えています。数日間検索した後、シンプルに見え、HTML5 と互換性があるため、Sigma.js を使用することにしました。

問題は、作者が Sigma.js のホームページで持っている最小限のコードを使用しても、Sigma.js の Web ページからグラフの例を表示できないことです。右クリック ビュー コードを使用して Web ページ全体をコピー アンド ペーストしましたが、無駄でした (このように)。シンプルな .html ファイル (css ファイル、js ファイル、さらにはサンプルに必要な .gexf ファイル) と同じフォルダーに必要なすべてのファイルを貼り付けましたが、黒い四角形のページしか表示されず、それ以上のものはありません。グラフが表示されません。私は何を間違っていますか？

著者が GitHub のライブラリのコード リポジトリで言及しているように、最初に sigma.js ファイルをビルドする必要がありますか? グラフを視覚化するにはこのツールが必要ですが (その場でグラフにデータをフィードします)、単純なコードを試すことさえできません! 私はその「ガイド」に従い、すべてのステップを実行しましたが、何も機能しません。

Webstudio: Microsoft Expression Web 4 および OS: Windows 8 Pro (IE10、FF17、および Chrome 23 で Web ページを開こうとしました)。

4

4 に答える 4

8

グラフを配置する div を配置する必要がありますabsolute。キャンバスの問題だと思います。

だからhtml

<!DOCTYPE html>
<html>
  <head>
    <script src="http://sigmajs.org/js/sigma.min.js"></script>
    <script src="/js/sigmatest.js"></script>
    <link rel="stylesheet" href="/css/sigma.css">
  </head>
  <body>
    <div id="sigma-parent">
      <div id="sigma-example">
      </div>
    </div>
  </body>
</html>

CSS

#sigma-parent {
  width: 500px;
  height: 500px;
  position: relative;
}    

#sigma-example {
  position: absolute;
  width: 100%;
  height: 100%;
}

のjssigmatest.js

function init() {
  var sigRoot = document.getElementById('sigma-example');
  var sigInst = sigma.init(sigRoot);
  sigInst.addNode('hello',{
    label: 'Hello',
    x: 10,
    y: 10,
    size: 5,
    color: '#ff0000'
  }).addNode('world',{
    label: 'World !',
    x: 20,
    y: 20,
    size: 3,
    color: '#00ff00'
  }).addEdge('hello_world','hello','world').draw();
}

if (document.addEventListener) {
  document.addEventListener('DOMContentLoaded', init, false);
} else {
  window.onload = init;
}
于 2013-03-05T15:40:24.697 に答える
0

このファイルhttp://sigmajs.org/data/arctic.gexf をダウンロードし、コードでパスを正しく参照していることを確認してください

于 2012-12-10T06:54:50.913 に答える