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 중국어 웹사이트의 기타 관련 기사를 참조하세요!