D3.js 시각화를 반응형으로 만들려면 어떻게 해야 합니까?

반응형 레이아웃으로 D3.js 시각화를 적응형으로 만들기

D3.js 시각화가 고정된 크기로 고정되어 있습니까? 동적으로 반응하도록 만드는 방법을 살펴보겠습니다.

정적인 960px x 500px SVG 그래픽을 생성하는 이 히스토그램 스크립트를 고려해 보세요. 반응형으로 만들려면 너비와 높이를 동적으로 조정해야 합니다.

일반적인 접근 방식은 창 크기 조정 시 그래프를 다시 그리는 것입니다. 브라우저에 내장된 크기 조정 이벤트 리스너를 사용하여 뷰포트의 변경 사항을 캡처할 수 있습니다.

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

그러나 다시 그릴 필요가 없는 대체 솔루션이 있습니다. 바로 SVG 요소의 viewBox 및 PreserveAspectRatio 속성을 조작하는 것입니다. .

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

이 방법을 사용하면 SVG 콘텐츠의 크기가 사용 가능한 공간에 맞게 자동으로 조정되며 대부분의 최신 브라우저는 viewBox에서 가로 세로 비율을 추론할 수 있습니다. 필요한 경우 이전 브라우저의 창 크기에 따라 SVG의 너비와 높이를 업데이트하는 코드를 추가할 수 있습니다.

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

이러한 수정을 통해 D3.js 시각화는 이제 브라우저의 변경 사항에 원활하게 적응합니다. 반응형 사용자 경험을 보장합니다.

위 내용은 D3.js 시각화를 반응형으로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!