文章/答案/技术大牛

发布

问JSON未被sigma.js读取
EN

Stack Overflow用户

提问于 2014-02-15 16:19:42

回答 2查看 9.2K关注 0票数 9

我有这个页面

<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

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-02-16 02:50:12

您的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()；string。

票数 26

Stack Overflow用户

发布于 2014-02-15 20:23:04

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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21795125

复制

相似问题

问JSON未被sigma.js读取
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSON未被sigma.js读取EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSON未被sigma.js读取
EN