Визуализация большого графа на веб-странице: networkx, vivagraph

У меня есть график из 5000 узлов и 5000 ссылок, который я могу визуализировать в Chrome благодаря библиотеке javascript vivagraph (webgl быстрее svg - например, в d3).

Мой рабочий процесс:

  • Сборка с помощью библиотеки python networkx и вывод результата в виде файла json.
  • Загрузите json и постройте график с помощью библиотеки javascript vivagraph.
  • Позиции узлов вычисляются библиотекой 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.

Если у кого-то есть подсказки по этому поводу, пожалуйста, избегайте сотен испытаний и, возможно, неудач;)


person qdelettre    schedule 10.06.2013    source источник
comment
Привет, вы нашли что-нибудь полезное для своего вопроса?   -  person Maziyar    schedule 08.07.2013
comment
Привет, на самом деле я переключился на другое решение: я использую d3.js для отображения статического графика в svg, затем сохраняю (большой) svg и визуализирую его в png с большим разрешением. Затем я получаю его фрагменты с помощью gda2tiles.py и использую leafletJS, чтобы отобразить его на картах Google!   -  person qdelettre    schedule 08.07.2013
comment
Ух ты, это много работы! Спасибо, что поделился приятелем :)   -  person Maziyar    schedule 09.07.2013
comment
Возможно, вы захотите попробовать плагин seadragon Gephi ... его довольно легко экспортировать и довольно легко масштабировать. Другая идея - экспортировать в gexf (он должен сохранять позиции) и визуализировать его с помощью sigma.js   -  person accidental_PhD    schedule 18.12.2013
comment
Звучит достаточно полезно, чтобы его можно было использовать в качестве небольшой библиотеки.   -  person Stuart Axon    schedule 27.04.2016


Ответы (1)


Spring Layout предполагает, что веса ребер поддерживают метрическое свойство, то есть Вес (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
person Vikram    schedule 26.06.2013