1

我正在测试一个用于图形可视化的 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 画布吗？

4

1 回答 1

2

它正在工作，但您需要为包含图形的 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：

于 2013-11-05T15:23:04.570 回答