크기 조정이 가능한 거품 형 차트

Question

D3js 거품 형 차트 예제 (https://bl.ocks.org/mbostock/4063269)를 사용하고 차트 크기를 현재 페이지에 맞게 조정할 수 없습니다. 어떻게하면 좋을까요?

<svg viewBox="0 0 300 300"></svg> 
<svg preserveAspectRatio="xMidYMid meet"></svg> 

Answer 1

안녕하세요 해리슨과 제라르을 : SVG로 설정되어 있는지 확인 "디스플레이 : 블록"을 사용해보십시오 같은 차트. 블록에

링크는 : - I는 SVG 컨테이너에 기초하여 상기 종횡비를 유지하기 위해 그 자체를 수정하는 방법을 보여 8-4과 두 개의 서로 다른 행 6-6 열 분할 사용한 https://bl.ocks.org/tejaser/c69f2f20cec53dd166dcb26ca43c2ae9/d57b7c6898fae90d586df16459730cc2226b4740

. 나는 "xMinYMin meet"을 예제에서 사용했으며 "xMidYMid meet"으로 바꾸면 최종 출력에 영향을 미치지 않습니다.

Answer 2

이 SVG의 비율을 유지하고 가로 세로 비율을 유지하려면이 컨테이너를 채우시겠습니까?

나는에 대한 뷰 박스의 기능을 보여주기 위해 부트 스트랩을 사용하는 블록을 만든, preserveAspectRatio = "xMidYMin 대회"