您的位置：首页 > Web前端 > JavaScript

sigma.js框架初探

2016-05-29 00:04 676 查看

最近项目开发需要用到sigma.js，网络上的中文资料很少，所以写这样一篇文章记录自己学习的过程。

资料来自官网。

快速开始

DATA

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

HTML

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

c2de
[/code]

记得要在服务器下查看，直接打开html文件无效，显示

XMLHttpRequest cannot load file:///D:/…/sigmajs/build/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.sigma.parsers.json @ sigma.parsers.json.min.js:1

index.html:1 Uncaught SyntaxError: Unexpected end of inputsigma.parsers.json @ sigma.parsers.json.min.js:1

教程

加载显示图形

我们有id为sigma-container的容器，以显示我们的图形。此元素的宽度和高度可以随意设定，sigma会适应它本身加进去的元素。此外，我们必须导入sigma，添加script标签。

因为sigma提供了一个专门用于加载和分析GEXF图形文件的插件。因此，我们所要做的就是加载插件，并使用它。

<!-- [...] -->
<div id="sigma-container"></div>
<script src="path/to/sigma.js"></script>
<script src="path/to/sigma.parsers.gexf.min.js"></script>
<script>
sigma.parsers.gexf(
'path/to/les-miserables.gexf',
{ // Here is the ID of the DOM element that
// will contain the graph:
container: 'sigma-container'
},
function(s) {
// This function will be executed when the
// graph is displayed, with "s" the related
// sigma instance.
}
);
</script>
<!-- [...] -->

回调事件

我们需要做的第一件事是便于检索邻居节点的方式。而要做到这一点的最好办法是添加到graph模型。

graph模型提供给节点和边阵列一个公共访问，但它也只维护它的方法，其中包括每邻居的每个节点的索引访问更多的索引。

然后，我们只需要绑定功能，事件，这将首先修改节点和边缘的颜色，然后刷新渲染。

<!-- [...] -->
<div id="sigma-container"></div>
<script src="path/to/sigma.js"></script>
<script src="path/to/sigma.parsers.min.gexf.js"></script>
<script>
// Add a method to the graph model that returns an
// object with every neighbors of a node inside:
sigma.classes.graph.addMethod('neighbors', function(nodeId) {
var k,
neighbors = {},
index = this.allNeighborsIndex[nodeId] || {};

for (k in index)
neighbors[k] = this.nodesIndex[k];

return neighbors;
});

sigma.parsers.gexf(
'path/to/les-miserables.gexf',
{
container: 'sigma-container'
},
function(s) {
// We first need to save the original colors of our
// nodes and edges, like this:
s.graph.nodes().forEach(function(n) {
n.originalColor = n.color;
});
s.graph.edges().forEach(function(e) {
e.originalColor = e.color;
});

// When a node is clicked, we check for each node
// if it is a neighbor of the clicked one. If not,
// we set its color as grey, and else, it takes its
// original color.
// We do the same for the edges, and we only keep
// edges that have both extremities colored.
s.bind('clickNode', function(e) {
var nodeId = e.data.node.id,
toKeep = s.graph.neighbors(nodeId);
toKeep[nodeId] = e.data.node;

s.graph.nodes().forEach(function(n) {
if (toKeep[n.id])
n.color = n.originalColor;
else
n.color = '#eee';
});

s.graph.edges().forEach(function(e) {
if (toKeep[e.source] && toKeep[e.target])
e.color = e.originalColor;
else
e.color = '#eee';
});

// Since the data has been modified, we need to
// call the refresh method to make the colors
// update effective.
s.refresh();
});

// When the stage is clicked, we just color each
// node and edge with its original color.
s.bind('clickStage', function(e) {
s.graph.nodes().forEach(function(n) {
n.color = n.originalColor;
});

s.graph.edges().forEach(function(e) {
e.color = e.originalColor;
});

// Same as in the previous event:
s.refresh();
});
}
);
</script>
<!-- [...] -->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航