web-dev-qa-db-fra.com

D3.js vs Raphael.js

Je suis fasciné par d3 et Raphael. Je comprends que Raphael est construit au-dessus de D3 et qu'il est compatible avec tous les navigateurs, mais je ne sais pas lequel est le mieux adapté à quels scénarios. Quelqu'un peut-il faire la lumière? Mon cas d'utilisation immédiat est potentiellement d'utiliser la chronologie SIMILE et de l'intégrer à un diagramme d'état (pour lequel j'ai l'intention d'utiliser d3/Raphael). Merci!

52
Nick

Raphael n'est pas construit sur D3.

Raphael vous aidera à dessiner des éléments. D3 est plus complet et vous aidera à lier des données à des éléments. Je dirais donc que D3 est plus puissant. Cette discussion sur le forum Discute de la présentation d'une chronologie SIMILE en utilisant D3, ils se réfèrent à ce projet qui implémente une chronologie en D3. Donc, à première vue, D3 est votre réponse.

Cependant, étant donné qu'il ne semble pas y avoir de widget pour D3 qui gère la chronologie SIMILE pour vous, Raphaël ou D3 pourrait être un bon choix. Autrement dit, à l'exception du fait que D3 ne fonctionne pas bien avec les versions antérieures d'Internet Explorer, comme expliqué dans cet article. Donc, si vous devez prendre en charge les versions antérieures d'IE, vous feriez mieux de Raphael.

45
CL22

D3 est beaucoup plus difficile à apprendre que Raphael, mais dans les deux cas, vous devrez également apprendre SVG pour pouvoir créer de meilleures animations. D'un autre côté, les visualisations D3 nécessitent généralement moins de mathématiques que les exemples similaires de Traitement ou Raphaël car il existe déjà de nombreuses dispositions préemballées.

Je dirais que D3 est le meilleur choix pour une raison évidente: D3 est basé sur la pile de normes Web actuelle (HTML, DOM - même si vous le détestez, vous devez l'utiliser, CSS, SVG, même Canvas), et est une bibliothèque pour travailler avec des données. Être un cadre de données, D3 est également livré avec:

  • des tonnes d'algorithmes et de dispositions (dispositions de force, dispositions de pile, arbres, etc.),
  • quelques fonctionnalités de base de gestion des données (imbrication, croix, regroupement, cumul - voir ces exemples: http://bl.ocks.org/phoebebright/raw/3176159/ ),
  • sélections de style jQuery,
  • et aussi des primitives de visualisation (d3.svg est livré avec tout ce dont vous avez besoin pour des graphiques simples).

En l'état, d3 n'est pas seulement meilleur que Raphael et Processing dans de nombreux cas, mais est également un remplacement viable pour jQuery, underscore.js et d'autres frameworks. Il y a beaucoup de bibliothèques de graphiques construites dessus, vous pouvez donc toujours faire glisser et déposer un graphique cool et réécrire l'encapsuleur de données autour de lui.

Vous pouvez trouver de bons exemples de chronologie en utilisant cette interface: http://biovisualize.github.com/d3visualization/#visualizationType=timeline

26
paxRoman

Les deux sont des animaux différents.

RaphaelJS simplifie et étend les fonctions des graphiques vectoriels basés sur SVG et VML.

D3js manipule simplement le DOM et s'appuie sur les normes graphiques (SVG et Canvas, sur les graphiques à barres, vous pouvez également utiliser les DIVs) pour dessiner. Par exemple d3.svg.symbol() retourne le contenu du paramètre d pour le passer à l'élément path sur le SVG, mais ne dessine pas le symbole par lui-même.

Vous pouvez utiliser D3js pour manipuler les données et les dessiner avec Raphael .

Ce blog expliquer comment combiner D3js + Raphael . Et vérifiez aussi D3 pour Raphael implémentation.

17
jkutianski

En tant que consultant du secteur public, j'ai trouvé qu'apprendre Raphael était un meilleur investissement pour moi depuis la plupart du temps, mes clients utilisent des versions plus anciennes de navigateurs. Mon client actuel utilise exclusivement IE7 avec lequel Raphaël fonctionne parfaitement et D3 non.

Personnellement, je préfère utiliser D3, mais professionnellement, ce n'est pas la réalité de ma situation.

10
Jared