sigma.js不读取JSON [英] JSON is not read by sigma.js
问题描述
我有此页面
<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>
可以很好地加载此处及以下
{
"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
But when I try to load my JSON
{"nodes":[ {
"id": "chr1",
"label": "Bob",
"size": 8.75
},
{
"id": "chr10",
"label": "Alice",
"size": 14.75
} ],"edges":[ {
"id": "1",
"source": "chr1",
"target": "chr10"
} ]}
我无法看到它. JSON结构对我来说似乎完全相同...
I can't get it visualised. The JSON structure seems exactly the same to me...
推荐答案
您的JSON不会在Sigma中显示，因为默认情况下Sigma的解析器需要节点的X和Y坐标.
Your JSON doesn't show up in Sigma because by default Sigma's parser needs X and Y coordinates for the nodes.
您可以做的是将X和Y坐标添加到JSON文件中，或者如果您不想这样做(例如，可能要对它们应用ForceAtlas布局)，那么您可以做一些事情像这样:
What you can do is either to add X and Y coordinates to JSON file, or if you don't want to do that (probably you will want to apply ForceAtlas layout to them, for example), then you could do something like this:
// 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插件.
You will also need to include ForceAtlas2 plugin in your scripts.
如果您不想使用ForceAtlas而只想要随机布局，请删除s.startForceAtlas2();上面的字符串.
If you don't want to use ForceAtlas and just want random layout, remove s.startForceAtlas2(); string above.
这篇关于sigma.js不读取JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
