Comparação entre d3.js e chart.js (apenas para gráficos) [fechado]

Usei chart.js em meus projetos várias vezes, mas nunca usei d3.js. Muitas pessoas dizem que d3.js é a melhor estrutura javascript para gráficos, mas nenhum deles é capaz de explicar o porquê, especialmente quando quero uma comparação com chart.js.

Eu encontrei isto: http://www.fusioncharts.com/javascript-charting-comparison/ mas não é o que eu estava procurando.

Alguém sabe de uma comparação desses frameworks em termos de usabilidade e desempenho (somente para gráficos)?

d3.jsnão é uma biblioteca de "gráficos". É uma biblioteca para criar e manipular SVG / HTML. Ele fornece ferramentas para ajudá-lo a visualizar e manipular seus dados. Embora você possa usá-lo para criar gráficos convencionais (barra, linha, pizza, etc ...), ele é capaz de muito mais. É claro que com esse "capaz de tanto" vem uma curva de aprendizado mais íngreme. Há uma série de bibliotecas de gráficos convencionais construídas em cima de d3.js- nvd3.js, dimple.js, dc.jsse você quiser ir por esse caminho.

Não estou familiarizado com Chart.js mas uma rápida olhada no site me diz que é mais uma biblioteca de gráficos corriqueira. Ele suporta 6 tipos básicos de gráfico e você não está indo cada vez para fazer coisas como esta com ele . Mas a API parece simples e tenho certeza de que é fácil de usar.

Fora isso, a distinção mais óbvia entre os dois é que Chart.jsé baseado em canvas, enquanto se d3.jstrata principalmente de SVG. (Agora eu digo principalmente porque d3.jspode manipular todos os tipos de elementos HTML, então você pode até mesmo usá-lo para ajudá-lo a desenhar em uma tela.) Em geral, a tela executa SVG para um grande número de elementos (estou falando de muito grande - milhares de pontos, linhas, etc ...). O SVG, por outro lado, é mais fácil de manipular e interagir. Com o SVG, cada ponto, linha, etc. torna-se parte do DOM - você quer aquele ponto verde agora, basta alterá-lo. Com o canvas, é um desenho estático que deveria ser redesenhado para fazer qualquer alteração - é claro que desenha tão rápido que você normalmente nem notará. Aqui estão algumas boas leituras da Microsoft.

Como estou tentando encontrar uma biblioteca de gráficos rápida para mostrar gráficos em dispositivos móveis, o desempenho foi importante para mim. Também precisava de uma licença que possibilitasse o uso comercial. Eu comparei:

1. c3, que é baseado em d3 e, portanto, usa SVG
2. chart.js que está usando canvas

Os gráficos são carregados dentro de um componente WebView dentro de um aplicativo nativo e todos os dados (incluindo a biblioteca JS) são locais, portanto, não há lentidão devido a solicitações http. Para maximizar ainda mais o desempenho, adicionalmente coloquei tudo dentro de um único arquivo.

Carreguei 4 gráficos (linha, barra, pizza, combinação de linha / barra) com cerca de 500 pontos de dados.

Minha medição de tempo excluiu o carregamento real da página html. Medi desde o momento em que comecei a usar o código da biblioteca de gráficos até o final da renderização. Toda a animação do gráfico foi desligada.

C3 levou cerca de 1500-1800 ms em dispositivos Android e IPhone modernos. O iPhone teve um desempenho cerca de 100 ms melhor do que o Android.

Chart.js demorou cerca de 400-800ms. O Android teve um desempenho cerca de 300ms melhor do que o iPhone.

Sem surpresa, o SVG é mais lento. Dependendo do seu caso de uso, talvez muito lento.

Em um computador desktop, a renderização em c3 era em torno de 150-200ms e charts.js em torno de 80-100ms. Executar o mesmo teste no emulador do Android e iPhone teve o mesmo resultado que no desktop. Portanto, a lentidão em dispositivos móveis é definitivamente devido aos limites de hardware / processamento.

espero que ajude

ATUALIZADO EM 2016

A regra geral é:

d3.js - ótimo para visualizações interativas

chart.js - ótimo para rápido e simples

Algumas outras bibliotecas de gráficos estão em ascensão, então continue testando e não se esqueça de contribuir com o código aberto !

chart.js
• Ele usa a tag canvas html5 que depende do pixel, então quando você redimensiona o gráfico gerado pelo chart.js você perde clareza
• É declarativo, significa que você deve apenas declarar as entradas necessárias para gerar o gráfico
• Curva de aprendizado é menor
• Os tipos de gráficos gerados são predefinidos e limitados

d3.js
• Ele usa svg que é independente da resolução, então quando você redimensionar o gráfico gerado pelo d3 você não perderá a clareza
• É imperativo, significa que você tem que escrever alguma lógica para gerar gráficos
• Curva de aprendizado íngreme
• Os tipos de gráficos gerados não são predefinidos e você pode criar qualquer gráfico que desejar