在div中插入元素意味着Java Script sigma.js库

我正在测试一个用于图形可视化的Java脚本库。在介绍性文档的基础上，我尝试在网页上做一个简单的图形显示。

这就是文档所说的：

易于使用
以下是创建实例的最小代码：

var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
  label: 'Hello',
  color: '#ff0000'
}).addNode('world',{
  label: 'World !',
  color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();

这是我的HTML网页：

<!DOCTYPE html>
<html>
<head>
    <title>Testing graphs</title>
    <script src="sigma.min.js"></script>
    <script src="jquery1102.js"></script>
</head>
<body>
    <div id="sig"></div>
    <script type="text/javascript">
    window.onload = loadGraph();
    function loadGraph () {
        var sigRoot = document.getElementById('sig');
        var sigInst = sigma.init(sigRoot);
        sigInst.addNode('hello',{
          label: 'Hello',
          color: '#ff0000'
        }).addNode('world',{
          label: 'World !',
          color: '#00ff00'
        }).addEdge('hello_world','hello','world').draw();
    }
    </script>
</body>
</html>

所以，我假设图形将显示在某个div区域中，并在页面加载后执行。然而，并没有任何显示在和控制台并没有声称任何错误。我甚至需要使用HTML5画布吗？

它正在工作，但您需要为包含图形的div提供高度和宽度。

<div id="sig" style="width:500px;height:500px;border:1px solid black"></div>

其次，这个简单的例子不是很好，因为这两个节点将被放置在彼此的顶部。因此，您可能还希望为每个节点提供x和y属性。

sigInst.addNode('hello',{
  label: 'Hello',
  color: '#ff0000',
    x: Math.random(),
    y: Math.random()    
}).addNode('world',{
  label: 'World !',
  color: '#00ff00',
    x: Math.random(),
    y: Math.random()
}).addEdge('hello_world','hello','world').draw();

这是一个jsfiddle：

http://jsfiddle.net/kaliatech/Le6Au/

相关内容

最新更新

热门标签：