我有这个页面
<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时
{"nodes":[ {
"id": "chr1",
"label": "Bob",
"size": 8.75
},
{
"id": "chr10",
"label": "Alice",
"size": 14.75
} ],"edges":[ {
"id": "1",
"source": "chr1",
"target": "chr10"
} ]}
我无法让它可视化.JSON结构对我来说似乎完全一样......
Dmi*_*kin 24
您的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(); 以上字符串.