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中文网其他相关文章！