Question

我正在尝试使用Sigma.js。我真的不是一个Javascript人，但即使是最基本的事情，我也无法做到这一点。

在开发者控制台中，我得到以下内容 -

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

这是导致我的问题的原因还是我的HTML / Javascript有什么问题？

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>The HTML5 Herald</title>
   <meta name="description" content="Sigmas Graph Example">
   <meta name="author" content="Dave">
   <script type="text/javascript" src="sigma.min.js"></script>
</head>

<body>
   <script>
      function myFunction()
      {
         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();
      }

      if (document.addEventListener) {
          document.addEventListener('DOMContentLoaded', myFunction, false);
      } else {
          window.onload = myFunction;
      }
   </script>
      <div id="sig"></div>
      <button onclick="myFunction()">Try it</button>
</body>
</html>

由于

Answer 1

是的，有一些技巧可以初始化sigma渲染画布。

有几点需要注意：

您将边和节点添加到sigma实例的“graph”属性，而不是实例本身。
您需要为每个节点指定x和y。
每个节点都是一个javascript对象，它应该具有'id'，'x'和'y'，以及可选的'color'，以及可选的与节点相关的其他数据。
同样对于边缘，每条边都应该有'id'，'source'和'target'
添加边和/或节点后，需要调用sigInst.refresh（），而不是draw（）
创建实例时，可以使用“选项”对象设置无数选项。
您需要设置目标div的大小，否则您将无法看到任何内容（至少在Chrome上）。

所以，这是一个基于上面脚本的工作版本。您还将在文档中注意到还有其他方法可以批量导入节点和边，例如graph.read（）。

<div id="sig" style="width: 800px; height: 600px;"></div>
<button onclick="myFunction()">Try it</button>
<script>
  function myFunction()
  {
     var settings = {
        defaultNodeColor: '#ec5148',
        defaulLabelColor: '#99f',
        defaultEdgeColor: '#aaa',
        edgeColor: "default", 
        labelSizeRatio: "1",
        labelThreshold: 1,
    };
    var sigInst = new sigma({
      container: 'sig',
      settings: settings
    });
     sigInst.graph.addNode({
        id: 'hello',
        label: 'Hello',
        color: '#ff0000',
        size: 5,
        x:0,
        y:0
     });
     sigInst.graph.addNode({
        id: 'world',
        label: 'World !',
        color: '#00ff00',
        size: 10,
        x:1,
        y:1
     });
     sigInst.graph.addEdge({
      id: "helloworld",
      source: "hello",
      target: "world",
     });
     sigInst.refresh();
  }
  if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', myFunction, false);
  } else {
      window.onload = myFunction;
  }
</script>

希望有所帮助。

使用Sigma.js的Javascript帮助

1 个答案: