Solución:
d3.js no es una biblioteca de “gráficos”. Es una biblioteca para crear y manipular SVG / HTML. Proporciona herramientas para ayudarlo a visualizar y manipular sus datos. Si bien puede usarlo para crear gráficos convencionales (barras, líneas, circulares, etc.), es capaz de mucho más. Por supuesto, con este “capaz de tanto” viene una curva de aprendizaje más pronunciada. Hay muchas bibliotecas de gráficos convencionales construidas sobre d3.js – nvd3.js, dimple.js, dc.js si quieres ir por esa ruta.
No estoy familiarizado con Chart.js pero un vistazo rápido al sitio web me dice que es más una biblioteca de gráficos corriente. Admite 6 tipos de gráficos básicos y nunca vas a hacer cosas como esta con él. Pero la API parece sencilla y estoy seguro de que es fácil de usar.
Aparte de eso, la distinción más obvia entre los dos es que Chart.js está basado en lienzo, mientras que d3.js se trata principalmente de SVG. (Ahora digo principalmente porque d3.js puede manipular todo tipo de elementos HTML, por lo que incluso podría usarlo para ayudarlo a dibujar en un lienzo.) En general, el lienzo funcionará mejor que SVG para una gran cantidad de elementos (estoy hablando muy grande: miles de puntos, líneas, etc. …). SVG, por otro lado, es más fácil de manipular e interactuar. Con SVG, cada punto, línea, etc. se convierte en parte del DOM; ahora desea que ese punto sea verde, solo cámbielo. Con el lienzo, es un dibujo estático que se debe volver a dibujar para realizar cualquier cambio; por supuesto, se dibuja tan rápido que generalmente nunca lo notará. Aquí hay una buena lectura de Microsoft.
Dado que estoy tratando de encontrar una biblioteca de gráficos rápida para mostrar gráficos en dispositivos móviles, el rendimiento fue importante para mí. También tenía que tener una licencia que permitiera su uso comercial. Yo comparé:
- c3, que se basa en d3 y, por lo tanto, usa SVG
- chart.js que está usando canvas
Los gráficos se cargan dentro de un componente WebView dentro de una aplicación nativa y todos los datos (incluida la biblioteca JS) son locales, por lo que no hay ralentización debido a solicitudes http. Para maximizar aún más el rendimiento, también coloco todo dentro de un solo archivo.
Cargué 4 gráficos (línea, barra, pastel, combinación de línea / barra) con alrededor de 500 puntos de datos.
Mi medición de tiempo excluyó la carga real de la página html. Medí desde el momento en que comencé a usar el código de la biblioteca de gráficos hasta el final del renderizado. Se desactivó toda la animación del gráfico.
C3 tomó alrededor de 1500-1800 ms en dispositivos Android e iPhone modernos. iPhone funcionó alrededor de 100 ms mejor que Android.
Chart.js tomó alrededor de 400-800ms. Android funcionó alrededor de 300 ms mejor que el iPhone.
No es de extrañar, el SVG es más lento. Dependiendo de su caso de uso, tal vez sea demasiado lento.
En una computadora de escritorio, la renderización en c3 fue de alrededor de 150-200ms y charts.js alrededor de 80-100ms. La ejecución de la misma prueba en el emulador de Android y iPhone tuvo el mismo resultado que en el escritorio. Por lo tanto, la ralentización de los dispositivos móviles se debe definitivamente a los límites de procesamiento / hardware.
Espero que ayude
ACTUALIZADO 2016
La regla general es:
d3.js – ideal para visualizaciones interactivas
chart.js – ideal para rápido y sencillo
Algunas otras bibliotecas de gráficos están aumentando, ¡así que siga probando y no se olvide de contribuir al código abierto!