visualización del gráfico de red JavaScript

Question

Necesito un gráfico de visualización de red (no un gráfico) en javascript para la entrada json. También utilicé el rgraph del árbol de herramientas de JTI infovis y el árbol del espacio para mostrar varios niveles en el gráfico. Pero los nodos se colapsaron por datos enormes. En rgraph, las arroheads de borde se fusionan con los nodos, en el árbol de espacio si el niño tiene 4 padres, coloca al niño demasiado ancho. por lo que no es estable para un gran volumen de datos. Pero no pude encontrar gráficos similares al formato de entrada infovis json. Por favor sugiérame una alternativa o soluciones para resolver el árbol de espacio de infovis y rgraph. Gracias de antemano

Answer 1

Por lo que sé, hay algunos proyectos js de código abierto para trabajar en la visualización de gráficos.

1. JIT, que usted está utilizando.
2. arborjs
3. protovis de Stanford. Parece genial, pero ya no está en desarrollo activo .

Para ser sincero, nunca los he usado en mi proyecto. Puedes probarlos tú mismo.

Answer 2

También consulte D3, una "biblioteca de JavaScript para manipular documentos basados ​​en datos" y sigma.js, una "biblioteca de JavaScript liviana de código abierto para dibujar gráficos, utilizando el elemento de lienzo HTML".

Answer 3

Es posible que desee echa un vistazo a esta biblioteca interactiva HTML5 gráficos, proporcionada por la visualización de datos Software Lab:

http://datavisualizationsoftwarelab.com/

Este SDK le permite crear gran variedad de gráficos:

• Tiempo basado gráficos
• Cuadros de red
• Gráficos circulares
• Próximamente son diagramas de Geo, tablas y gráficos faceta XML

Los gráficos son pura HTML 5, no hay dependencias en otras librerías, por lo tanto fácil de integrar con cualquier marco de JS (como jQuery). Utiliza Canvas para renderizar, tiene soporte completo multitáctil para navegación, interacción y exploración de datos.

Un ejemplo de diagrama de red:

Gráficos vienen con una amplia API y configuraciones, para que pueda controlar todos los aspectos de las listas.

Answer 4

Pago netjsongraph.js, una biblioteca javascript simple basada en D3 que utiliza el formato NetJSON, que está diseñado específicamente para el software de red.

Ver el netjsongraph demo example.

Espero que ayude.

Answer 5

En cuanto a mí - Yo prefiero vis.js, porque:

• red generado es elástico - se adapta automáticamente a la red usuario vuelva a dar forma a
• Algunas características útiles de interfaz de usuario están integrados - como el zoom-in/zoom salida privado
• red es altamente personalizable, - colores del borde, ancho, etc ...
• al definir nodos de la red - no hay necesidad de especificar coordenadas X, Y de nodos.
  (he visto algunos de lib donde se necesita para definir X, coordenadas Y para nodos, y que es una mierda)
• Por no hablar de que es muy fácil de utilizar este libarary, - véase más abajo:

Uso:

// create an array with nodes 
    var nodes = new vis.DataSet([ 
    {id: 1, label: 'Node 1'}, 
    {id: 2, label: 'Node 2'}, 
    {id: 3, label: 'Node 3'}, 
    {id: 4, label: 'Node 4'}, 
    {id: 5, label: 'Node 5'} 
    ]); 

    // create an array with edges 
    var edges = new vis.DataSet([ 
    {from: 1, to: 3, width: 1}, 
    {from: 1, to: 2, width: 6}, 
    {from: 2, to: 4, width: 1}, 
    {from: 2, to: 5, width: 3}, 
    {from: 2, to: 3, width: 1}, 
    ]); 

    // create a network 
    var container = document.getElementById('mynetwork'); 
    var data = { 
    nodes: nodes, 
    edges: edges 
    }; 
    var options = {}; 
    var network = new vis.Network(container, data, options); 

Demo