Question

我有这个页面

<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结构对我来说似乎完全一样......

Answer 1

您的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（）;上面的字符串。

Answer 2

您需要将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"
}]

}

sigma.js不读取JSON

2 个答案: