Chaque fois que je travaille sur un projet avec des visualisations, des gestionnaires de projet réagissent habituellement dans l’horreur quand je dis que je ne suis pas à l’aide de D3. Pourquoi est-il préoccupant? Pourquoi choisirais-je de ne pas utiliser D3?
en répondant à ces questions, nous devons comprendre le contexte dans lequel D3 a été créé., D3 a été publié pour la première fois en 2011, et il était assez innovant à l’époque.
Normalement, ce que vous verriez, ce sont des bibliothèques qui fournissent des graphiques prêts à l’emploi et avec une liste massive d’options. Cela peut fonctionner, mais le problème est que chaque fois que quelqu’un a une nouvelle exigence, une option devrait être ajoutée et prise en charge. Finalement, vous vous retrouvez avec ce qui est effectivement un langage où vous utilisez plusieurs objets pour définir un graphique. D3 a adopté une approche différente, au lieu de vous donner les composants complets, il vous donne des fonctions d’assistance pilotées par les données pour créer ces composants vous-même.,
à cette époque, les bibliothèques comme jQuery et Backbone étaient populaires. Créer vos propres graphiques en utilisant ces bibliothèques aurait été difficile, surtout si vous voulez qu’ils soient dynamiques. Les navigateurs ne faisaient qu’adopter de nouvelles normes CSS modernes comme les transitions, et des propriétés plus modernes comme flex box étaient encore loin d’être implémentées.
D3 a résolu beaucoup de ces problèmes, et c’était sans doute l’approche la plus simple pour implémenter des visualisations à l’époque. Cependant, beaucoup de choses ont changé depuis., Nous avons de nouveaux frameworks modernes qui utilisent des concepts plus flexibles et expressifs tels que virtual DOM, et CSS a tellement de nouvelles capacités pour la mise en page et les animations.
plutôt que de passer automatiquement à D3, laissez-moi énumérer quelques raisons pour lesquelles vous devriez reconsidérer votre utilisation de celui-ci.
j’ai travaillé avec D3 à de nombreuses reprises au cours des dernières années, et j’ai implémenté toutes sortes de visualisations avec lui. Je comprends les concepts généraux de D3, et j’ai encore du mal à travailler avec. Tous ceux avec qui j’ai travaillé, des juniors aux développeurs seniors, ont également du mal à le faire., Ce que beaucoup de gens, y compris moi-même, c’est que nous trouvons un exemple en ligne qui correspond à peu près à ce que nous recherchons, et modifions l’exemple pour répondre à nos besoins.
Si nous voulons ajouter des fonctionnalités personnalisées, nous allons probablement faire plus de recherche, et trouver quelque chose qui semble correct, essayer de comprendre comment cela fonctionne et continuer à le modifier jusqu’à ce qu’il fasse ce que nous voulons qu’il fasse.
cela vous semble-t-il familier? D’autre part, les développeurs de nos jours sont très familiers avec les bibliothèques Dom virtuelles et ils sont familiers avec les modèles., N’est-il pas plus logique de tirer parti de ces compétences, plutôt que d’introduire une bibliothèque qui nécessite une façon de penser entièrement différente?
c’est plus facile que vous ne le pensez
lorsque vous pensez pour la première fois à créer vos propres graphiques à partir de zéro, il est courant de se sentir inquiet et terrifié. Cela peut sembler un composant très compliqué à créer, mais ce n’est vraiment pas le cas lorsque vous le décomposez. Prenons un exemple de graphique linéaire. Voici comment vous feriez un graphique linéaire en D3:
Source: bl.ocks.,voici comment je ferais quelque chose comme ça en utilisant Preact:
et le CSS:
Source: JSFiddle
il y a pas mal de code, mais je n’utilise que les outils déjà à ma disposition, dans ce cas, Ma bibliothèque de vues qui est preact (peut être n’importe quoi, React, Vue, Angular etc), comme Flexbox.,
L’exemple D3 nécessite l’apprentissage de nombreux concepts sur D3. Ce dernier nécessite uniquement d’utiliser les connaissances que vous avez déjà sur votre bibliothèque de vues. Je dirais qu’il est plus facile à maintenir que L’exemple D3, Car quiconque connaît la bibliothèque de vues devrait pouvoir sauter dans la base de code et commencer à apporter des modifications.
N’oubliez pas la taille du bundle
en fonction du type de graphique et de la quantité d’arbres pouvant optimiser votre bundle, D3 importera au pire plus de 70 Ko de code. Cela peut avoir des impacts sur le chargement de votre site., Ainsi, s’il est vrai que vous écrivez Plus de code que L’exemple D3 d’origine, dans l’ensemble, vous distribuez moins de code que si vous aviez utilisé D3.
en général, lorsque vous utilisez du code tiers, il est toujours important de se souvenir des coûts d’utilisation de ce code. Si vous n’avez besoin que d’une seule fonction à partir d’une bibliothèque, importeriez-vous la bibliothèque entière pour cette fonctionnalité?, Oui, vous ne devriez pas toujours réinventer la roue, mais vous devez considérer le temps d’apprendre cette bibliothèque, la taille qu’elle ajoute à votre bundle, la licence de cette bibliothèque, le support que cette bibliothèque aura, la fiabilité des mainteneurs, la capacité de corriger les bogues en temps opportun, etc.
Canvas et HTML sont souvent meilleurs que SVG
Si vous avez remarqué dans l’exemple précédent, nous avons utilisé une combinaison de HTML et SVG. Pour une raison quelconque, les gens vont essayer d’implémenter des graphiques entiers à l’aide de SVG, mais il n’y a vraiment pas besoin. CSS est beaucoup plus puissant que SVG de nos jours.,
par exemple, SVG ne prend pas en charge nativement l’habillage de texte. Si nous voulions faire un habillage de texte, nous devrions le calculer en JavaScript:
Source: bl.ocks.org
avec HTML d’autre part, tant que white-space est défini sur normal, il s’enroulera naturellement.
des éléments tels que des cercles et des rectangles peuvent être réalisés en HTML et CSS. Vous pouvez utiliser transform et border-radius pour créer toutes sortes de formes., Si vous vouliez faire un graphique à barres en D3 avec deux coins arrondis, vous ne pouviez pas utiliser rect car il arrondirait les quatre coins, au lieu des Deux Coins que vous vouliez arrondir. Votre seule option serait d’utiliser path.
la seule raison pour laquelle j’utiliserais des balises SVG, c’est à cause de la balisepath. C’est toujours le seul moyen propre de créer des formes arbitraires sans équivalent HTML.
Si vous avez besoin de performances supplémentaires, il y a aussi la balise canvas à considérer., Avec canvas, vous devrez coder vous-même les interactions de base, mais cela présente l’avantage de ne pas avoir la surcharge de HTML ou SVG qui peut consommer de la mémoire et être plus lent à mettre à jour. Vous pouvez mettre à jour les pixels individuels sur le canevas comme vous le souhaitez, afin d’optimiser votre visualisation et de la mettre à l’échelle. Les nouvelles API de navigateur telles que OffscreenCanvas aideront également à améliorer les performances lorsqu’elles sont utilisées à L’intérieur des travailleurs.
mais Canvas ne se met pas à L’échelle comme SVG?,
Une chose très courante que j’ai entendue assez souvent, c’est que canvas n’est pas adapté aux visualisations car il ne se met pas à l’échelle aussi bien que SVG. Dans l’utilisation normale de canvas, si vous zoomez ou dézoomez sur une page ou utilisez un navigateur qui affiche un DPI plus élevé, votre canvas sortira Pixélisé et flou.
cela se produit parce que lorsque vous créez votre canevas, vous devez définir le nombre de pixels avec lesquels vous souhaitez dessiner votre canevas., Lorsque nous définissons les attributs width Et height, il peut sembler que nous définissions la taille CSS, mais nous définissons en fait la taille de l’espace de dessin du canevas. Ce ne sont pas la même chose.
normalement, vos pixels CSS seraient définis à la même taille que votre espace de dessin canvas, mais lorsque vous zoomez / dézoomez avec votre navigateur, vous verrez à nouveau le même problème. La solution consiste à utiliser window.devicePixelRatio et à redimensionner votre espace de dessin canvas.
Source: JSFiddle
En utilisant le rapport de pixels, nous pouvons augmenter l’espace de dessin pour le canevas. Mais augmenter l’espace de dessin ne suffit pas, nous devons également dire au canevas que les futures opérations de dessin doivent être mises à l’échelle au rapport de pixels. Cela résoudra alors tous les problèmes de mise à l’échelle.,
pouvez-vous dire lesquels sont canvas et lesquels sont SVG?
Conclusion
Comme vous pouvez le voir, il ya de nombreuses raisons pour lesquelles D3 est assez obsolète aujourd’hui pour de nombreux cas d’utilisation. Le web a considérablement évolué depuis sa sortie., Si vous faites des graphiques simples comme des beignets, des graphiques à barres, des graphiques linéaires, des diagrammes de dispersion, etc., envisagez de voir si vous pouvez les implémenter en utilisant votre framework existant. Il n’y a rien vraiment que D3 vous fournira pour ces cas d’utilisation. En termes de maintenance, votre code sera probablement plus maintenable que plus difficile à maintenir, et si vous devez apporter des modifications, il devrait être trivial d’apporter ces modifications.
Il n’y a aucune raison pour que les chefs de produit se sentent concernés par le fait de ne pas utiliser D3, et vous ne devriez pas être préoccupé non plus.
Merci pour la lecture!,
Updates
- article mis à jour pour ajouter « mais Canvas ne se met pas à L’échelle comme SVG?” section.