Question

我在localhost上使用Windows ftp站点来放置我的代码

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <script type="text/javascript" src="js/sigma.min.js"></script>
  <script type="text/javascript" src="js/sigma.parsers.gexf.min.js"></script>
  <link   rel="stylesheet" href="style.css">

</head>
<body>

  <div id="sigma-container"></div>

  <script>
  sigma.parsers.gexf(
        'data/arctic.gexf',
        {container: 'sigma-container'},
        function(s) {
        }
      );


// Refresh the graph to see the changes:
s.refresh();

</script>
</body>
</html>

style.css：

  #sigma-container {
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0;
  z-index: 1;
}

使用Firefox开发人员工具，我在浏览器上找出了错误：

“ReferenceError：s未定义”

我该如何解决？

Answer 1

这是因为s变量未初始化。我假设你应该成为某种对象。

尝试添加以下内容：

var i,
    s,
    N = 100,
    E = 500,
    g = {
      nodes: [],
      edges: []
    };
// Generate a random graph:
for (i = 0; i < N; i++)
  g.nodes.push({
    id: 'n' + i,
    label: 'Node ' + i,
    x: Math.random(),
    y: Math.random(),
    size: Math.random(),
    color: '#666'
  });
for (i = 0; i < E; i++)
  g.edges.push({
    id: 'e' + i,
    source: 'n' + (Math.random() * N | 0),
    target: 'n' + (Math.random() * N | 0),
    size: Math.random(),
    color: '#ccc'
  });
sigma.renderers.def = sigma.renderers.canvas;
s = new sigma({
  graph: g,
  renderer: {
    container: document.getElementById('graph-container'),
    type: 'canvas'
  },
  settings: {
    borderSize: 2,
    outerBorderSize: 3,
    defaultNodeBorderColor: '#fff',
    defaultNodeOuterBorderColor: 'rgb(236, 81, 72)',
    enableEdgeHovering: true,
    edgeHoverHighlightNodes: 'circle',
  }
});

来自https://github.com/Linkurious/linkurious.js/blob/plugin/dragNodes/examples/drag-nodes.html

Answer 2

虽然无需调用refresh()，但您只需将其移至回调函数即可。 s仅在回调范围内可用。

sigma.parsers.gexf(
  'data/arctic.gexf',
  {container: 'sigma-container'},
  function(s) {
    // Refresh the graph to see the changes:
    s.refresh();
  }
);

仅在已有sigma实例时才需要这样做。另请参阅https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.parsers.gexf

上的插件文档

无法使用sigma.js显示网络图

2 个答案: