Javascript Library for Diagram Creation?

Question

Quale libreria JavaScript (gratuita o commerciale) può creare diagrammi di rete di computer o schemi elettrici. Inoltre, che supporta le animazioni tra i diversi elementi negli schemi, ecc.

Grazie.

Answer 1

Scopri questi tre librerie e vedere se si può dare una mano:

Raphael

Raphaël è una piccola libreria JavaScript che dovrebbe semplificare il lavoro con la grafica vettoriale sul web. Se si si desidera creare il proprio grafico specifico o ritaglio immagine e ruotare widget, per esempio , è possibile ottenere semplicemente e facilmente con questa libreria. Raphaël ['ræfeɪəl] utilizza la raccomandazione SVG W3C e VML come base per la creazione di elementi grafici . Ciò significa che ogni oggetto grafico creato è anche un oggetto DOM , quindi è possibile collegare i gestori di eventi JavaScript o modificare in seguito. L'obiettivo di Raphaël è di fornire un adattatore che renderà disegno vettoriale compatibile cross-browser e facile.

Protovis

Protovis compone visualizzazioni personalizzate di dati con semplici segni come bar e punti. A differenza di basso livello grafici librerie che diventano rapidamente noioso per la visualizzazione, Protovis definisce marchi attraverso le proprietà dinamiche che codificare i dati, permettendo eredità, scale e layout per semplificare costruzione. Protovis è gratuito e open-source, fornito con la licenza BSD . Utilizza JavaScript e SVG per visualizzazioni Web native; non è necessario il plug-in (sebbene sia necessario il un browser Web moderno)! Sebbene l'esperienza di programmazione sia utile, Protovis è principalmente dichiarativo e progettato per essere appreso con l'esempio.

Processingjs

Processing.js è il progetto sorella del Trattamento popolare visiva linguaggio di programmazione , progettato per il web. In lavorazione.js rende i tuoi dati visualizzazioni, arte digitale, animazioni interattive, educativi grafici, videogiochi, ecc. funzionano utilizzando gli standard web e senza alcun plug-in . Si scrive codice utilizzando la lingua di elaborazione , includendolo nella pagina Web e Processing.js fa il resto. Non è magia, ma quasi.

Originariamente sviluppato da Ben Fry e Casey Reas produzione iniziato come un linguaggio di programmazione open source basato su Java per aiutare le arti elettroniche e comunità visual design imparano le basi della programmazione di computer in un contesto visivo. Processing.js prende al livello successivo, consentendo al codice di elaborazione di essere eseguito da qualsiasi browser HTML5 compatibile, incluse le attuali versioni di Firefox, Safari, Chrome, Opera e Internet Explorer. Processing.js offre il meglio della programmazione visuale per il web, sia per l'elaborazione e gli sviluppatori web.

Answer 2

1. Google classifiche: http://code.google.com/intl/uk/apis/chart/
2. Dojo: http://dojotoolkit.org/grids-charts
3. ExtJS: http://www.sencha.com/products/extjs/examples/#sample-3

Answer 3

Prova l'app gratuita online per disegnare diagrammi, draw.io. Utilizza la libreria mxGraph per disegnare diagrammi.

responsabilità:

Sono uno sviluppatore software associato con Jgraph.

Answer 4

La risposta è assolutamente JointJS

Answer 5

.... ultimo ma non meno Draw2D.

è una libreria JS per la creazione di diagrammi semplice. L'API è più simile a una sintassi Java/C#. Strato di astrazione e gestione sopra la famosa RaphaelJS lib.

Esempio di codice:

GoJS

 var canvas = new draw2d.Canvas("gfx_holder"); 

     // Create two standard nodes for "start" and "end" and link 
     // this figures with a standard Connector 
     // 
     var start = new draw2d.shape.node.Start(); 
     var end = new draw2d.shape.node.End(); 

     canvas.addFigure(start, 80,180); 
     canvas.addFigure(end, 450,250); 

     // Add a connection via API calls between Start and Stop 
     // 
     var connection = new draw2d.Connection(); 
     connection.setSource(start.getOutputPort(0)); 
     connection.setTarget(end.getInputPort(0)); 
     canvas.addFigure(connection);