javascript - with - title tag w3schools




Biblioteca de visualização de gráficos em JavaScript (4)

Eu tenho uma estrutura de dados que representa um gráfico direcionado, e quero renderizar isso dinamicamente em uma página HTML. Esses gráficos geralmente são apenas alguns nós, talvez dez no extremo superior, então meu palpite é que o desempenho não será grande coisa. Idealmente, gostaria de poder conectá-lo com o jQuery para que os usuários possam ajustar o layout manualmente, arrastando os nós ao redor.

Nota: Eu não estou procurando por uma biblioteca de gráficos.


Acabei de juntar o que você está procurando: http://www.graphdracula.net

É JavaScript com layout de gráfico direcionado, SVG e você pode até mesmo arrastar os nós ao redor. Ainda precisa de alguns ajustes, mas é totalmente utilizável. Você cria nós e bordas facilmente com código JavaScript como este:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Eu usei a biblioteca Raphael JS mencionada anteriormente (o exemplo graffle) mais algum código para um algoritmo de layout gráfico baseado em força que encontrei na rede (tudo código-fonte aberto, licença MIT). Se você tiver algum comentário ou precisar de um determinado recurso, eu posso implementá-lo, é só pedir!

Você pode querer dar uma olhada em outros projetos também! Abaixo estão duas meta-comparações:

  • SocialCompare tem uma extensa lista de bibliotecas, e a linha "Nó / gráfico de borda" irá filtrar as visualizações de gráficos.

  • DataVisualization.ch avaliou muitas bibliotecas, incluindo as de nó / gráfico. Infelizmente não há link direto, então você terá que filtrar por "graph":

Aqui está uma lista de projetos semelhantes (alguns já foram mencionados aqui):

Bibliotecas puras de JavaScript

  • vis.js suporta muitos tipos de gráficos de rede / borda, além de cronogramas e gráficos 2D / 3D. Auto-layout, auto-clustering, motor de física flexível, mobile-friendly, navegação por teclado, layout hierárquico, animação etc. MIT licenciado e desenvolvido por uma empresa holandesa especializada em pesquisa em redes auto-organizadas.

  • Cytoscape.js - análise gráfica interativa e visualização com suporte móvel, seguindo as convenções do jQuery. Financiado através de subsídios do NIH e desenvolvido por @maxkfranz (veja sua resposta abaixo ) com a ajuda de várias universidades e outras organizações.

  • O JavaScript InfoVis Toolkit - Jit, uma estrutura de layout e desenho gráfico interativo e multiuso. Veja por exemplo a Árvore Hiperbólica . Construído pelo arquiteto dataviz do Twitter Nicolas Garcia Belmonte e comprado pela Sencha em 2010.

  • D3.js Poderosa biblioteca multiuso de visualização JS, a sucessora da Protovis. Veja o exemplo do gráfico direcionado à força e outros exemplos de gráficos na gallery .

  • A biblioteca de visualização JS do Plotly usa D3.js com ligações JS, Python, R e MATLAB. Veja um exemplo de nexworkx no IPython here , exemplo de interação humana here e JS Embed API .

  • sigma.js leve mas poderosa para desenhar gráficos

  • jsPlumb Plug-in jQuery para criar gráficos interativos conectados

  • Springy - um algoritmo de layout gráfico direcionado à força

  • Processing.js porta Javascript da biblioteca Processing por John Resig

  • JS Graph It - arraste e solte caixas conectadas por linhas retas. Layout automático mínimo das linhas.

  • Graffle de RaphaelJS - exemplo interativo do gráfico de uma biblioteca genérica do desenho do vetor da multiuso. RaphaelJS não pode layout nós automaticamente; você precisará de outra biblioteca para isso.

  • JointJS Core - biblioteca de diagramas de código aberto licenciada por MPL de David Durman. Ele pode ser usado para criar diagramas estáticos ou ferramentas de diagramação totalmente interativas e construtores de aplicativos. Funciona em navegadores que suportam SVG. Algoritmos de layout não incluídos no pacote principal

  • mxGraph Anteriormente biblioteca de diagramação HTML 5 comercial, agora disponível sob o Apache v2.0. mxGraph é a biblioteca base usada no draw.io.

Bibliotecas comerciais

Bibliotecas abandonadas

  • Visualizador de Rede JS do Ctoscape Web Embeddable (sem novos recursos planejados; sucedido pelo Cytoscape.js)

  • Canviz JS renderer para gráficos Graphviz. Abandoned em setembro de 2013.

  • arbor.js gráfica sofisticada com física e olhos agradáveis. Abandonado em maio de 2012. Existem vários garfos semi-maintained .

  • jssvggraph "O mais simples algoritmo de layout gráfico direcionado a força implementado como uma biblioteca Javascript que usa objetos SVG". Abandonado em 2012.

  • jsdot desenho de gráfico lado do cliente jsdot . Abandonado em 2011 .

  • Toolkit Gráfico Protovis para Visualização (JavaScript). Substituído por d3.

  • Representação da Moo Wheel Interactive JS para conexões e relações (2008)

  • JSViz de visualização de gráficos JSViz 2007-era

  • layout de gráfico dagre para JavaScript

Bibliotecas não Javascript


Como o guruz mencionou, o JIT tem vários layouts gráficos / de árvore, incluindo visualizações RGraph e HyperTree bastante atraentes.

Além disso, acabei de colocar uma implementação super simples baseada jssvggraph SVG jssvggraph (sem dependências, ~ 125 LOC) que deve funcionar bem o suficiente para pequenos gráficos exibidos em navegadores modernos.


JSViz foi muito legal, mas lento com gráficos maiores e foi abandonado desde 2007.

prefuse é um conjunto de ferramentas de software para criar visualizações interativas de dados ricas em Java. flare é uma biblioteca do ActionScript para criar visualizações que são executadas no Adobe Flash Player, abandonadas desde 2012.


Disclaimer: Eu sou um desenvolvedor de Cytoscape.js

O Cytoscape.js é uma biblioteca de visualização de gráficos HTML5. A API é sofisticada e segue as convenções do jQuery, incluindo

  • seletores para consulta e filtragem ( cy.elements("node[weight >= 50].someClass") faz o que você espera),
  • encadeamento (por exemplo, cy.nodes().unselect().trigger("mycustomevent") ),
  • funções semelhantes a jQuery para ligação a eventos,
  • elementos como coleções (como o jQuery tem coleções de HTMLDomElements),
  • extensibilidade (pode adicionar layouts personalizados, interface do usuário, funções principais e de coleta e assim por diante),
  • e mais.

Se você está pensando em construir um webapp sério com gráficos, você deve pelo menos considerar o Cytoscape.js. É grátis e de código aberto:

http://js.cytoscape.org





graph-layout