我在哪里以及如何使用数据段代码？

Question

我正在尝试使用 sigma.js 来实现图表，但我不确定该怎么做。 Data 段放在哪里？是 javascript 代码吗？

HTML

<html>
<head>
<style type="text/css">
  #container {
    max-width: 400px;
    height: 400px;
    margin: auto;
  }
</style>
</head>
<body>
<div id="container"></div>
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
<script>
  sigma.parsers.json('data.json', {
    container: 'container',
    settings: {
      defaultNodeColor: '#ec5148'
    }
  });
</script>
</body>
</html>

数据：

    {
  "nodes": [
    {
      "id": "n0",
      "label": "A node",
      "x": 0,
      "y": 0,
      "size": 3
    },
    {
      "id": "n1",
      "label": "Another node",
      "x": 3,
      "y": 1,
      "size": 2
    },
    {
      "id": "n2",
      "label": "And a last one",
      "x": 1,
      "y": 3,
      "size": 1
    }
  ],
  "edges": [
    {
      "id": "e0",
      "source": "n0",
      "target": "n1"
    },
    {
      "id": "e1",
      "source": "n1",
      "target": "n2"
    },
    {
      "id": "e2",
      "source": "n2",
      "target": "n0"
    }
  ]
}

Answer 1

这是一个URL。在这种情况下，data.json 是与 HTML 文件位于同一目录中的文件。如果您希望在代码中而不是在单独的文件中使用 JSON，您可以执行以下操作：

new sigma({
  container: 'container',
  graph: graph
});

其中 graph 是 JavaScript 对象。

编辑：动态添加图表：

var s = new sigma('container');
s.graph.read(graph);

（您可能还需要 s.graph.clear() 和 s.refresh()）

我在哪里以及如何使用数据段代码？

Where and how do I use the data segment code?

javascript

json

sigma.js