Comment SVG viewBox et préservationAspectRatio peuvent-ils rendre les visualisations d3.js réactives au redimensionnement de la fenêtre ?

Amélioration de la réactivité des visualisations d3.js grâce à des ajustements dynamiques de la largeur et de la hauteur

Les visualisations réactives sont cruciales pour l'adaptabilité aux différentes tailles d'écran. Pour y parvenir, on pourrait se demander comment modifier un script de visualisation d'histogramme qui crée initialement un graphique de taille fixe (960 x 500 pixels) pour l'ajuster dynamiquement lors du redimensionnement de la fenêtre.

Le cœur de la solution

Historiquement, résoudre ce problème impliquait de redessiner le graphique des événements de redimensionnement. Cependant, une approche plus élégante et plus efficace a émergé. En modifiant les attributs viewBox et verifyAspectRatio du

<code class="html"><svg id="chart" viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid meet">
</svg></code>

Cette modification permet à la visualisation d'évoluer de manière transparente et de conserver ses proportions sans avoir besoin de redessiner.

Maintenir les proportions pour Navigateurs plus anciens

Bien que la plupart des navigateurs modernes puissent déterminer automatiquement le rapport hauteur/largeur en fonction de viewBox, les navigateurs plus anciens peuvent nécessiter une gestion supplémentaire. Dans de tels cas, vous pouvez redimensionner dynamiquement l'élément du graphique lorsque la fenêtre change de taille, garantissant ainsi que le contenu est mis à l'échelle de manière appropriée.

<code class="javascript">var aspect = width / height,
    chart = d3.select('#chart');
d3.select(window)
  .on("resize", function() {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
  });</code>

Cet extrait de code ajuste la largeur et la hauteur du graphique tout en préservant ses proportions d'origine.

Être témoin de la transformation

Pour découvrir la visualisation réactive en action, redimensionnez la fenêtre ou le volet inférieur droit de cette démo en direct : https://bl.ocks.org/mbostock/3043334.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!