使用 neo4j 和 sigma.js 的布局
Layouts using neo4j and sigma.js
我正在尝试学习如何将 sigma.js 与 neo4j 一起使用,希望能得到一些帮助,让布局算法与 sigma 一起工作。neo4j.cypher。当与 sigma.neo4j.cypher 一起使用时,sigma.layout.fruchtermanReingold.js 布局在下面的代码中不起作用。我非常有信心我有所有 sigma 导入,但如果您觉得问题可能存在,可以将这些添加到问题中。
非常感谢。
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
<script src="../plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="../plugins/sigma.plugins.animate/sigma.plugins.animate.js"></script>
<script src="../plugins/sigma.layout.fruchtermanReingold/sigma.layout.fruchtermanReingold.js"></script>
<script type="application/javascript">
sigma.neo4j.cypher(
{ url: 'http://localhost:7474', user: 'neo4j', password: 'admin' },
'MATCH (n) OPTIONAL MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100',
{ container: 'graph-container' } ,
function(s) {
console.log('Number of nodes :'+ s.graph.nodes().length);
console.log('Number of edges :'+ s.graph.edges().length);
}
);
// Configure the Fruchterman-Reingold algorithm:
var frListener = sigma.layouts.fruchtermanReingold.configure(s, {
maxIterations: 500,
easing: 'quadraticInOut',
duration: 800
});
// Bind the events:
frListener.bind('start stop interpolate', function(e) {
console.log(e.type);
});
// Start the Fruchterman-Reingold algorithm:
sigma.layouts.fruchtermanReingold.start(s);
</script>
回复,
我在这里做了一个 plunkr 演示:http://embed.plnkr.co/daMtV25BYEh5ZQFG2fnk/preview
现在,我看到了一个图表,但没有任何动静……并且 fruchtermanReingold 示例不适用于 linkurious repo。
希望对你有所帮助
您需要在 Cypher 插件之外实例化 Sigme(如果您不提供,它会为您实例化一个 sigma 对象)。
我正在尝试学习如何将 sigma.js 与 neo4j 一起使用,希望能得到一些帮助,让布局算法与 sigma 一起工作。neo4j.cypher。当与 sigma.neo4j.cypher 一起使用时,sigma.layout.fruchtermanReingold.js 布局在下面的代码中不起作用。我非常有信心我有所有 sigma 导入,但如果您觉得问题可能存在,可以将这些添加到问题中。
非常感谢。
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
<script src="../plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="../plugins/sigma.plugins.animate/sigma.plugins.animate.js"></script>
<script src="../plugins/sigma.layout.fruchtermanReingold/sigma.layout.fruchtermanReingold.js"></script>
<script type="application/javascript">
sigma.neo4j.cypher(
{ url: 'http://localhost:7474', user: 'neo4j', password: 'admin' },
'MATCH (n) OPTIONAL MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100',
{ container: 'graph-container' } ,
function(s) {
console.log('Number of nodes :'+ s.graph.nodes().length);
console.log('Number of edges :'+ s.graph.edges().length);
}
);
// Configure the Fruchterman-Reingold algorithm:
var frListener = sigma.layouts.fruchtermanReingold.configure(s, {
maxIterations: 500,
easing: 'quadraticInOut',
duration: 800
});
// Bind the events:
frListener.bind('start stop interpolate', function(e) {
console.log(e.type);
});
// Start the Fruchterman-Reingold algorithm:
sigma.layouts.fruchtermanReingold.start(s);
</script>
回复,
我在这里做了一个 plunkr 演示:http://embed.plnkr.co/daMtV25BYEh5ZQFG2fnk/preview
现在,我看到了一个图表,但没有任何动静……并且 fruchtermanReingold 示例不适用于 linkurious repo。
希望对你有所帮助
您需要在 Cypher 插件之外实例化 Sigme(如果您不提供,它会为您实例化一个 sigma 对象)。