ウェブページでのビッググラフの視覚化：networkx、vivagraph

Question

約5000ノードと5000リンクのグラフがあります。これはthe vivagraph javascript library（webgはd3などのsvgよりも高速です）のおかげでChromeで視覚化できます。

私のワークフローは次のとおりです。networkx Pythonライブラリと出力とJSONファイルとして結果を構築

• 。
• jsonをロードし、the vivagraph javascript libraryでグラフを作成します。
• ノード位置が

ライブラリJSによって計算される問題は、それが十分positionnedノードとレイアウトをレンダリングするために時間がかかることです。

私のアプローチは、たとえばノードの位置をnetworkxにあらかじめ計算することです。このアプローチの本当に良い点は、ブラウザ上のクライアント作業を最小限に抑えることです。しかし、私はウェブページ上の良い位置を達成することはできません。私はこのステップで助けが必要です。私は今Gephiをしようとしています

/*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(); 
    }); 
} 

、しかし、私はしたくない：JavaScriptで、私のページで次に

## 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) 

：

ノード位置計算に関連するPythonのコードがあります私はjavaに慣れていないので、gephi toolkitを使用してください。

Answer 1

春のレイアウトは、エッジの重みメトリックプロパティ、すなわち重量（A、B）+重量（Aを維持することを前提として）;誰かがこの上でいくつかのヒントを得た場合

は、臨床試験の百、多分失敗私を避けてください、C）>重量（B、C）。そうでない場合、networkxはできるだけ現実的なものにしようとします。

あなたはこんにちは

pos=nx.spring_layout(G,k=\alpha, iterations=\beta) 
    # where 0.0<\alpha<1.0 and \beta>0 
    # k is the minimum distance between the nodes 
    # iterations specify the simulated annealing runs 
    # This code works only on Networkx 1.8 and not earlier versions