我有一个包含5000个节点和5000个链接的图表,我可以通过 vivagraph javascript库在Chrome中进行可视化(例如,在d3中,webgl比svg更快)。
我的工作流程如下:
我的方法是例如在 networkx中预先计算节点位置。这种方法的真正优点是最小化浏览器上客户端的工作量。但是我无法在网页上实现良好的位置。我需要在这一步上得到帮助。
节点位置计算的相关python代码如下:
然后在我的页面中,使用 JavaScript :
我现在正在尝试使用Gephi,但是我不想使用gephi toolkit,因为我不习惯使用Java。
如果有人对此有一些提示,请避免让我做数百次尝试,也许还会失败 ;)
我的工作流程如下:
- 使用 networkx python库构建,并将结果输出为json文件。
- 加载json并使用 vivagraph javascript库构建图表。
- 节点位置由js库计算
我的方法是例如在 networkx中预先计算节点位置。这种方法的真正优点是最小化浏览器上客户端的工作量。但是我无法在网页上实现良好的位置。我需要在这一步上得到帮助。
节点位置计算的相关python代码如下:
## positionning
try:
# Position nodes using Fruchterman-Reingold force-directed algorithm.
pos=nx.spring_layout(G)
for k,v in pos.iteritems():
# scaling tentative
# from small float like 0.5555 to higher values
# casting to int because precision is not important
pos[k] = [ int(i*1000) for i in v.tolist() ]
except Exception, e:
print "positionning failed"
raise
## setting positions
try:
# set position of nodes as a node attribute
# that will be used with the js library
nx.set_node_attributes(G,'pos', pos)
except Exception, e:
print "getting positions failed"
raise e
# output all the stuff
d = json_graph.node_link_data(G)
with open(args.output,'w') as f:
json.dump(d,f)
然后在我的页面中,使用 JavaScript :
/*global Viva*/
function graph(file){
var file = file;
$.getJSON(file, function(data) {
var graphGenerator = Viva.Graph.generator();
graph = Viva.Graph.graph();
# building the graph with the json data :
data.nodes.forEach(function(n,i) {
var node = graph.addNode(n.id,{d: n.d});
# node position is defined in the json element attribute 'pos'
node.position = {
x : n.pos[0],
y : n.pos[1]
};
})
# adding links between nodes
data.links.forEach(function(l,i) {
graph.addLink(data.nodes[l.source].id, data.nodes[l.target].id);
})
var max_link = 55
var min_link = 1
var colors = d3.scale.linear().domain([min_link,max_link]).range(['#F0F0F0','#252525']);
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength : 80,
springCoeff : 0.0008,
dragCoeff : 0.001,
gravity : -5.0,
theta : 0.8
});
var graphics = Viva.Graph.View.webglGraphics();
graphics
.node(function(node){
# color and size of nodes
color = colors(node.links.length)
if(node.id == "root"){
// pin node on canvas, so no position update
node.isPinned = true;
size = 60;
} else {
size = 20+(7-node.id.length)*(7-node.id.length);
}
return Viva.Graph.View.webglSquare(size,color);
})
.link(function(link) {
# color on links
fromId = link.fromId;
toId = link.toId;
if(toId == "root" || fromId == "root"){
return Viva.Graph.View.webglLine("#252525");
} else {
if( fromId[0] == toId[0]){
linkcolor = linkcolors(fromId[0])
return Viva.Graph.View.webglLine(linkcolor);
} else {
linkcolor = averageRGB(linkcolors(fromId[0]),linkcolors(toId[0]))
return Viva.Graph.View.webglLine('#'+linkcolor);
}
}
});
renderer = Viva.Graph.View.renderer(graph,
{
layout : layout,
graphics : graphics,
enableBlending: false,
renderLinks : true,
prerender : true
});
renderer.run();
});
}
我现在正在尝试使用Gephi,但是我不想使用gephi toolkit,因为我不习惯使用Java。
如果有人对此有一些提示,请避免让我做数百次尝试,也许还会失败 ;)