Comparación entre d3.js y chart.js (solo para gráficos) [cerrado]

He usado chart.js en mis proyectos varias veces pero nunca he usado d3.js. Mucha gente dice que d3.js es el mejor marco de JavaScript para gráficos, pero ninguno de ellos es capaz de explicar por qué, especialmente cuando quiero una comparación con chart.js.

Encontré esto: http://www.fusioncharts.com/javascript-charting-comparison/ pero no es lo que estaba buscando.

¿Alguien sabe acerca de una comparación de estos marcos en términos de usabilidad y rendimiento (solo para gráficos)?

d3.jsno 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 una gran cantidad de bibliotecas de gráficos convencionales construidos en la parte superior de d3.js- nvd3.js, dimple.js, dc.jssi desea ir por ese camino.

No estoy familiarizado, Chart.jspero 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.jsse basa en lienzos, mientras que se d3.jstrata principalmente de SVG. (Ahora digo principalmente porque d3.jspuede 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 de muy grandes: 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é:

1. c3, que se basa en d3 y, por lo tanto, usa SVG
2. 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. Así que 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 olvide contribuir al código abierto .

chart.js
• Utiliza una etiqueta de lienzo html5 que depende de los píxeles, por lo que cuando cambia el tamaño del gráfico generado por chart.js, pierde claridad
• Es declarativo, significa que solo debe declarar las entradas requeridas para generar el gráfico
• La curva de aprendizaje es menor
• Los tipos de gráficos generados están predefinidos y son limitados

d3.js
• Utiliza svg, que es independiente de la resolución, por lo que cuando cambie el tamaño del gráfico generado por d3 no perderá claridad
• Es imperativo, significa que tienes que escribir algo de lógica para generar gráficos.
• Curva de aprendizaje pronunciada
• Los tipos de gráficos generados no están predefinidos y puede crear cualquier gráfico que desee