2013-06-10 13 views
5

the vivagraph javascript library (webgl svg'den daha hızlıdır - örneğin d3'te) sayesinde Chrome'da görüntüleyebileceğim yaklaşık 5000 düğüm ve 5000 bağlantı içeren bir grafiğim var.Bir web sayfasında Büyük Grafik görselleştirme: networkx, vivagraph

Benim iş akışı: networkx piton kütüphane ve çıkış bir json dosyası olarak sonuç ile

  • Binası.
  • Json'u yükleyin ve grafiği the vivagraph javascript library ile yapılandırın.
  • Düğümler pozisyonları sorun iyi positionned düğümlerle düzenini işlemek için zaman almasıdır js kütüphanesine

tarafından hesaplanır. Benim yaklaşımım, örneğin, networkx numaralı düğümdeki düğüm konumunu önceden hesaplamaktır. Bu yaklaşımdaki gerçekten iyi nokta, istemci çalışmalarının tarayıcıda en aza indirilmesidir. Ancak web sayfasında iyi pozisyonlar alamıyorum. Bu adımda yardıma ihtiyacım var. Şimdi Gephi çalışıyorum

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

, ama istemiyorum: javascript, benim sayfa Sonra

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

:

düğüm konum hesaplaması için ilgili piton kodudur java kullanılmadığı için gephi toolkit kullanın.

+0

Hi tarafından bu ayarlamak deneyebilir? – Maziyar

+1

Merhaba, aslında başka bir tür bir çözüme geçtim: svg'de statik bir grafik görüntülemek için d3.js'yi kullanıyorum, sonra (büyük) svg'yi kaydedip büyük bir çözünürlükle png olarak yapıyorum. Sonra gda2tiles.py ile fayans olsun ve ala google haritalar görüntülemek için leafletJS kullanın! – user1254498

+0

Vay, bu çok iş! Paylaşım arkadaşı için teşekkürler :) – Maziyar

cevap

1

Bahar Düzen kenar ağırlıkları metrik özelliğini, yani Ağırlık (A, B) + Ağırlık (A korumak varsayar); birileri bu konuda bazı ipuçları var ise

, çalışmaların yüz belki başarısızlık beni lütfen kaçının , C)> Ağırlık (B, C). Durum böyle değilse, networkx bunları olabildiğince gerçekçi hale getirmeye çalışır.

Size soru için yararlı bir şey bulduk,

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 
İlgili konular