D3.js tutoriel - Partie 11 - Graphiques responsifs

Introduction

Dans la partie 8 de ce tutoriel, nous avons créé un simple diagramme à barres de taille (200 x 100 pixels).

Nous souhaitons maintenant que ce diagramme deviennet responsif, c'est à directement que ses dimensions s'adaptent automatiquement si la taille de la division dans laquelle il se trouve est modifiée, par exemple si la fenêtre est redimensionnée.

Une solution classiquement rencontrée est d'intercepter l'événement resize pour recalculer les propriétés dimensionnelles du graphique. Cela fonctionne, mais il y a un bien meilleure alternative.

La meilleure alternatice est d'ajouter l'attribut preserveAspectRatio au container SVG. Commen mentionné dans la documentaiton "L'attibut preserveAspectRatio indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur du viewBox est différent du ratio de la zone d'affichage. ".

La domcumentation mentionne également : "Parce que les proportions du SVG sont définis par l'attribut viewBox, si ce dernier n'est pas définit alors l'attribut preserveAspectRatio n'a aucun effet".

Diagramme à barres responsif

Créons un viewport dans notre container SVG et ajoutons l'attribut preserveAspectRatio :

// Create our SVG container with grey background
var svg = d3.select("#bar-chart")
            .append("svg")
            .attr('viewBox','0 0 200 100' )
            .attr('preserveAspectRatio','xMinYMin');

Voici probablement le diagramme à barres le plus simple que vous puissiez créer :

Voir aussi


Dernière mise à jour : 29/01/2020