Bagaimanakah SVG viewBox dan preserveAspectRatio boleh menjadikan visualisasi d3.js responsif kepada saiz semula tetingkap?

Meningkatkan Responsif dalam Visualisasi d3.js melalui Pelarasan Lebar dan Ketinggian Dinamik

Penggambaran responsif adalah penting untuk kebolehsuaian dalam pelbagai saiz skrin. Untuk mencapai matlamat ini, seseorang mungkin tertanya-tanya bagaimana untuk mengubah suai skrip visualisasi histogram yang pada mulanya mencipta grafik bersaiz tetap (960 x 500 piksel) untuk dilaraskan secara dinamik apabila saiz tetingkap diubah.

Nadi Penyelesaian

Secara sejarah, menangani isu ini melibatkan melukis semula carta pada acara mengubah saiz. Walau bagaimanapun, pendekatan yang lebih elegan dan cekap telah muncul. Dengan mengubah suai viewBox dan preserveAspectRatio atribut

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

Pengubahsuaian ini membolehkan visualisasi menskala dan mengekalkan nisbah bidangnya dengan lancar tanpa perlu melukis semula.

Mengekalkan Perkadaran untuk Pelayar Lama

Walaupun kebanyakan penyemak imbas moden boleh menentukan nisbah bidang secara automatik berdasarkan Kotak paparan, penyemak imbas lama mungkin memerlukan pengendalian tambahan. Dalam kes sedemikian, anda boleh mengubah saiz elemen carta secara dinamik apabila tetingkap menukar saiz, memastikan kandungannya diskalakan dengan sewajarnya.

<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>

Coretan kod ini melaraskan lebar dan ketinggian carta sambil mengekalkan nisbah aspek asalnya.

Saksikan Transformasi

Untuk mengalami visualisasi responsif dalam tindakan, ubah saiz tetingkap atau anak tetingkap kanan bawah tunjuk cara langsung ini: https://bl.ocks.org/mbostock/3043334.

Atas ialah kandungan terperinci Bagaimanakah SVG viewBox dan preserveAspectRatio boleh menjadikan visualisasi d3.js responsif kepada saiz semula tetingkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!