2012-05-14 18 views
19

¿Hay alguna biblioteca de lienzo que sea como d3.js (es svg library). Tengo un sitio web here y codifiqué un gráfico con elementos svg, sin embargo, no es eficiente en los navegadores de los teléfonos inteligentes y funciona muy lento. Ahora quiero cambiarlo con un tipo de lienzo en 2D y ver si es mejor o no. ¿Puede sugerir una biblioteca de lienzo que sea útil para este propósito?alternativas de canvas HTML5 para d3.js, biblioteca de visualización de gráficos

Gracias ...

Respuesta

6

Para el Samsung Olympic Genome Project facebook app, que utiliza http://thejit.org para hacer la fuerza dirigida animación estilo de gráficos de la aplicación. Está muy modificado por mí y por otros en mi equipo, por supuesto, y solo desempeña un papel muy pequeño en la aplicación, pero es un marco bastante poderoso.

+0

¿Qué compatibilidad hay para esta biblioteca? – dax

23

D3 no es necesariamente una biblioteca única svg se utiliza en muchos casos, pero la biblioteca puede hacer cualquier tipo de representaciones que le gustaría hacer. Vea este ejemplo de coordenadas paralelas usando lona en D3, de Kai Chang: http://bl.ocks.org/2409451

Véase también aquí por alguna discusión sobre los problemas de rendimiento, etc., que podrían ser útiles: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion

+0

¿hay alguna comparación de rendimiento de SVG frente a CANVAS? parece que el lienzo es mucho mejor, pero no hay muchas librerías centradas en el lienzo para la visualización de datos, como hace D3 para svg –

+2

@ V3ss0n: Para una comparación SVG vs canvas, eche un vistazo a la comparación provista en [OpenLayers website] (http: // trac.osgeo.org/openlayers/wiki/Future/OpenLayersWithCanvas). – amergin

+1

@ V3ss0n: ver http://citeseerx.ist.psu.edu/viewdoc/download?rep=rep1&type=pdf&doi=10.1.1.141.7632 –

4

Tome un vistazo a Cytoscape.JS el cual utiliza un Lienzo HTML5 para renderizado. En el momento de escribir esto, está en su infancia pero el proyecto parece prometedor. De acuerdo a su wiki de la biblioteca es compatible con navegadores de escritorio y móviles:

Cytoscape.js se integra fácilmente en su aplicación web, sobre todo porque Cytoscape.js es compatible con navegadores de escritorio, como Chrome, y teléfonos navegadores, al igual que en el iPad.

+0

¡Buen uso de varias capas de lienzo para optimizar los redibujados de interacción del usuario! Impresionado. –

+0

Amigo, muchas gracias por mencionar esto. He pasado por todo un montón de bibliotecas de JS hoy, incluyendo D3, JIT, Arbor, Sigma y otras, y todas son locas (D3) o totalmente inflexibles (JIT, ...). Esto parece que podría salvar mi día. – kralyk

4

Chart.js es una biblioteca de JavaScript que acaba de aparecer y crea gráficos utilizando HTML5 para la representación. No es tan característica como D3, pero está funcionando para convertirse en eso exactamente en el futuro. http://www.chartjs.org/