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)?
Respostas:
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:
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 !