Bagaimanakah Saya Boleh Menjadikan Visualisasi D3.js Saya Responsif?

Jadikan Visualisasi D3.js Anda Adaptif dengan Reka Letak Responsif

Adakah anda mempunyai visualisasi D3.js yang tersekat dengan dimensi tetap? Mari terokai cara menjadikannya dinamik dan responsif.

Pertimbangkan skrip histogram ini yang mencipta grafik SVG 960px x 500px statik. Untuk menjadikannya responsif, kami perlu memperkenalkan pelarasan dinamik pada lebar dan ketinggiannya.

Pendekatan biasa melibatkan melukis semula graf pada saiz semula tetingkap. Kami boleh menggunakan pendengar acara ubah saiz terbina dalam penyemak imbas untuk menangkap perubahan dalam port pandangan.

<code class="javascript">d3.select(window).on("resize", function() {
  // Update the width and height based on the current viewport
  width = window.innerWidth;
  height = window.innerHeight;
  
  // Redraw the visualization with the new dimensions
});</code>

Walau bagaimanapun, terdapat penyelesaian alternatif yang menghapuskan keperluan untuk melukis semula: memanipulasi viewBox dan memelihara atributAspectRatio bagi elemen SVG .

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

Kaedah ini membolehkan kandungan SVG berskala secara automatik agar sesuai dengan ruang yang tersedia, dan kebanyakan penyemak imbas moden boleh membuat kesimpulan nisbah bidang daripada Kotak paparan. Jika perlu, anda boleh menambah kod untuk mengemas kini lebar dan ketinggian SVG berdasarkan saiz tetingkap dalam penyemak imbas lama.

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

Dengan pengubahsuaian ini, visualisasi D3.js anda kini akan menyesuaikan dengan lancar kepada perubahan dalam penyemak imbas dimensi, memastikan pengalaman pengguna yang responsif.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjadikan Visualisasi D3.js Saya Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!