SVG viewBox 和preserveAspectRatio 如何讓 d3.js 視覺化回應視窗大小調整？

透過動態寬度和高度調整增強 d3.js 可視化的響應能力

響應式可視化對於不同螢幕尺寸的適應性至關重要。為了實現這一目標，人們可能想知道如何修改直方圖視覺化腳本，該腳本最初會建立固定大小的圖形（960 x 500 像素），以便在調整視窗大小時動態調整。

解決方案的核心

從歷史上看，解決此問題涉及在調整大小事件時重新繪製圖表。然而，一種更優雅、更有效率的方法已經出現。透過修改

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

此修改使視覺化能夠無縫縮放並保持其縱橫比，而無需重繪。

維護比例較舊的瀏覽器

雖然大多數現代瀏覽器可以根據 viewBox 自動確定寬高比，但較舊的瀏覽器可能需要額外的處理。在這種情況下，您可以在視窗大小變更時動態調整圖表元素的大小，確保內容適當縮放。

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

此程式碼片段調整圖表的寬度和高度，同時保留其原始縱橫比。

見證轉變

要體驗響應式視覺化的實際效果，請調整此即時簡報的視窗或右下窗格的大小：https://bl.ocks.org/mbostock/ 3043334。

以上是SVG viewBox 和preserveAspectRatio 如何讓 d3.js 視覺化回應視窗大小調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！