2012-11-28 4 views
4

웹 인터페이스에서 대형 네트워크 그래프를 시각화하고 싶습니다. 며칠 동안 검색 한 후에 Sigma.js를 사용하기로 결정했습니다. 간단하고 HTML5와 호환되기 때문입니다.Sigma.js로 그래프를 표시 할 수 없습니다.

문제는 저자가 Sigma.js의 홈페이지에있는 최소 코드를 사용하는 경우에도 Sigma.js 웹 페이지의 그래프 예제를 표시 할 수 없다는 것입니다. 심지어 오른쪽 클릭보기 코드를 사용하여 전체 웹 페이지를 복사하여 붙여 넣었지만 헛됨 (like this). 나는 필요한 모든 파일을 간단한 .html 파일 (CSS 파일, js 파일, 예를 들어 필요한 .gexf 파일)이있는 동일한 폴더에 붙여 넣었지만 검정색 사각형 만있는 페이지 만 가져옵니다. 그래프가 표시되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

저자가 GitHub의 라이브러리 코드 저장소에 언급 한대로 sigma.js 파일을 먼저 만들어야합니까? 그래프를 시각화하려면이 도구가 필요합니다 (즉, 그래프를 데이터로 제공 할 것입니다). 그러나 간단한 코드로 실험 할 수는 없습니다. 나는 심지어 that "guide"을 따라 갔고 모든 단계를 밟았지만 아무 것도 작동 할 수 없었다.

Webstudio : Microsoft Expression Web 4 및 OS : Windows 8 Pro (IE10, FF17 및 Chrome 23에서 웹 페이지를 열어 보았습니다.)

+0

이것은 Sigma.js 포럼에 더 적합한 질문입니다. – thatidiotguy

+0

@ PiXel1225 : 문제가 해결되면 답변을 수락 할 수 있습니까? – MERose

+0

@Merose : 모든 답변은 원래 질문 이후 6 개월에서 1 년 * 간행되었습니다. 그 시간이 지나면 나는 분명히 내 대답을 발견했으며, 이제는 무엇이 잘못되었는지를 기억할 수 없기 때문에 가능한 대답으로 표시하거나하지 않습니다. – Lefteris008

답변

0

는이 파일 http://sigmajs.org/data/arctic.gexf 을 다운로드하고 코드 당신이 그래프를 가지고 싶은 사업부는 absolute가 위치해야합니다

+0

파일이 없어졌습니다. – MERose

+0

시도해보십시오. https://raw.githubusercontent.com/jacomyal/sigma.js/master/examples/data/arctic.gexf –

+0

답변을 업데이트하는 것이 좋습니다. – MERose

7

에서 제대로 경로를 대해 참조했는지 확인하십시오. 캔버스 문제라고 생각합니다.

있도록 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%; 
} 

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; 
} 
0

sigmatest.js 시그마 JS 브라우저 호환성 (을) 문제를 갖는다. bowser를 업데이트하거나 다른 브라우저를 사용해보십시오.

저는 파이어 폭스에서 작동하며 정상적으로 작동합니다.

관련 문제