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