library - Alternativas de lienzo HTML5 para d3.js, biblioteca de visualización de gráficos
d3js charts examples (5)
¿Hay alguna biblioteca de Canvas que sea como d3.js (es la biblioteca svg)? Tengo un sitio web aquí y codifiqué un gráfico con elementos svg sin embargo, no es eficiente en los navegadores de teléfonos inteligentes y funciona muy lento. Ahora quiero cambiarlo con un tipo de lienzo 2d y ver si es mejor o no. ¿Puede sugerir una biblioteca de lienzos que sea útil para este propósito?
Gracias...
Chart.js es una biblioteca javascript que acaba de salir y crea gráficos utilizando HTML5 para renderizar. No es una función tan completa como la D3, pero está trabajando para convertirse exactamente en eso en el futuro. http://www.chartjs.org/
D3 no es necesariamente una biblioteca de solo svg; svg se usa en muchos casos, pero la biblioteca puede hacer cualquier tipo de representación que le gustaría hacer. Vea este ejemplo de coordenadas paralelas utilizando lienzo en D3, por Kai Chang: http://bl.ocks.org/2409451
También consulte aquí para obtener información sobre problemas de rendimiento, etc., que podrían ser útiles: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
Eche un vistazo a Cytoscape.JS que utiliza un lienzo HTML5 para renderizar. En el momento de escribir esto está en su infancia, pero el proyecto parece prometedor. Según su wiki, la biblioteca admite navegadores de escritorio y móviles:
Cytoscape.js se integra fácilmente en su aplicación web, especialmente porque Cytoscape.js admite navegadores de escritorio, como Chrome, y navegadores móviles, como en el iPad.
Para la aplicación de Facebook del Proyecto del Genoma Olímpico de Samsung , usamos http://thejit.org para hacer la animación de estilo de gráfico dirigido por la fuerza para la aplicación. Está fuertemente modificado por mí y por otros en mi equipo, por supuesto, y solo juega un papel muy pequeño en la aplicación, pero es un marco bastante poderoso.
Sé que llego tarde a la fiesta, pero los tiempos han cambiado, y creo que esta pregunta merece una respuesta actualizada. El rendimiento de SVG ha mejorado mucho a lo largo de los años y, especialmente para las visualizaciones no triviales, como las de gráficos, a menudo ofrece un rendimiento superior; pero realmente depende del caso de uso exacto: si la visualización es simple y consta de miles de elementos, especialmente en dispositivos móviles, Canvas puede ser la opción más rápida. Si la visualización es casi trivial, WebGL ofrece el mejor rendimiento y supera a Canvas de forma directa, ¡especialmente en dispositivos móviles!
Sin embargo, especialmente WebGL y Canvas son un poco más difíciles de usar que el enfoque declarativo que utiliza SVG. Las cosas como las animaciones y transiciones de CSS son fáciles de hacer con SVG y ofrecen un buen rendimiento debido a que son aceleradas por hardware y totalmente independientes del rendimiento de JavaScript. Canvas y WebGL siempre requieren JavaScript.
Si echa un vistazo a la biblioteca de dibujo de gráficos comerciales yFiles para HTML , verá que ofrece las tres tecnologías al mismo tiempo. Esto se debe a que los tres pueden ser la mejor opción, dependiendo del caso de uso exacto.
Hay una entrada de blog que compara el rendimiento de SVG, Canvas y WebGL, especialmente en el contexto de la visualización de gráficos. Compara varios tamaños de gráficos y categorías de dispositivos. La "conclusión" es que no hay un ganador claro. Muchas veces la combinación de las tres tecnologías da los mejores resultados. Sin embargo, para gráficos más pequeños, SVG la mayor parte del tiempo da muy buenos resultados y es un placer trabajar con ellos. Esa es también la razón por la que d3.js tiene su enfoque en SVG, en lugar de Canvas y WebGL, diría yo.
Hay una demo interactiva vinculada a esa entrada del blog que te permite jugar con las diversas tecnologías y ver sus fortalezas y debilidades. Por supuesto, la demostración compara principalmente las tres tecnologías usadas en esa biblioteca específica, por lo que sus resultados pueden variar, pero pasaron mucho tiempo optimizando las tres tecnologías en esa biblioteca, así que creo que los resultados no son demasiado sesgados.
Descargo de responsabilidad: trabajo para la compañía que crea la biblioteca mencionada anteriormente, pero no represento a mi empleador aquí en SO. Creo que lo que dije debería ser válido no solo para esa biblioteca.