sigma.js 不读取 JSON答案

【问题标题】：JSON is not read by sigma.jssigma.js 不读取 JSON
【发布时间】：2014-03-14 17:52:25
【问题描述】：

我有这个页面

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

加载here 及以下提供的第一个示例图效果很好

{
  "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"
    }
  ]
}

但是当我尝试加载我的 JSON 时

{"nodes":[ {
 "id": "chr1",
"label": "Bob",
"size":   8.75 
},
{
 "id": "chr10",
"label": "Alice",
"size":  14.75 
} ],"edges":[ {
 "id": "1",
"source": "chr1",
"target": "chr10" 
} ]}

我无法将其可视化。 JSON 结构对我来说似乎完全一样...

【问题讨论】：

标签： sigma.js

【解决方案1】：

您需要将 x,y 坐标添加到 JSON，如下所示：

{
"nodes": [
    {
        "id": "chr1",
        "x": 0,
        "y": 0,
        "label": "Bob",
        "size": 8.75
    },
    {
        "id": "chr10",
        "label": "Alice",
        "x": 3,
        "y": 1,
        "size": 14.75
    }
],
"edges": [{
    "id": "1",
    "source": "chr1",
    "target": "chr10"
}]

}

【讨论】：

【解决方案2】：

您的 JSON 不会显示在 Sigma 中，因为默认情况下 Sigma 的解析器需要节点的 X 和 Y 坐标。

您可以做的是将 X 和 Y 坐标添加到 JSON 文件，或者如果您不想这样做（例如，您可能希望对它们应用 ForceAtlas 布局），那么您可以做一些事情像这样：

    // these are just some preliminary settings 
    var g = {
        nodes: [],
        edges: []
    };

   // Create new Sigma instance in graph-container div (use your div name here) 
   s = new sigma({
   graph: g,
   container: 'graph-container',
   renderer: {
    container: document.getElementById('graph-container'),
    type: 'canvas'
   },
   settings: {
    minNodeSize: 8,
    maxNodeSize: 16
   }
   });

   // first you load a json with (important!) s parameter to refer to the sigma instance   

   sigma.parsers.json(
        '/data/your-jsonfile.json',
        s,
        function() {
            // this below adds x, y attributes as well as size = degree of the node 
            var i,
                    nodes = s.graph.nodes(),
                    len = nodes.length;

            for (i = 0; i < len; i++) {
                nodes[i].x = Math.random();
                nodes[i].y = Math.random();
                nodes[i].size = s.graph.degree(nodes[i].id);
                nodes[i].color = nodes[i].center ? '#333' : '#666';
            }

            // Refresh the display:
            s.refresh();

            // ForceAtlas Layout
            s.startForceAtlas2();
        }
   );

您还需要在脚本中包含 ForceAtlas2 插件。

如果您不想使用 ForceAtlas 而只想随机布局，请删除 s.startForceAtlas2();上面的字符串。

【讨论】：