Question

我正在测试Java脚本library for graphs visualization。基于介绍性文档，我尝试在网页上显示一个简单的图形。

这就是文档所说的：

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

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画布吗？

Answer 1

它正常工作，但你需要为包含图形的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/

将元素插入div意味着Javascript sigma.js库

1 个答案: