Не могу представить сетевой график с sigma.js

Question

Не могу представить сетевой график с sigma.js

Я использую сайт ftp Windows на localhost, чтобы поставить свой код

<!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 не определено"

Как я могу это исправить?

1

sigma.js

Источник

user3592007 04 мар '15 в 18:23

2 ответа

Другие вопросы по тегам sigma.js

user4061637 06 мар '15 в 14:01 2015-03-06 14:01 · Answer 1 · 2015-03-06 14:01

Это потому, что переменная 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

user1706846 08 фев '17 в 14:53 2017-02-08 14:53 · Answer 2 · 2017-02-08 14:53

Хотя звонить не нужно 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