サイズ変更可能なバブルチャート

Question

D3jsバブルチャートの例（https://bl.ocks.org/mbostock/4063269）を使用しており、現在のページに合わせてグラフのサイズを変更できません。どうすればいい？

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

Answer 1

こんにちはハリソンとヘラルド、

私はのためのビューボックスの可能性を実証するために、ブートストラップ使用してブロックを作成しました同じチャート。ブロックに

リンクである： - https://bl.ocks.org/tejaser/c69f2f20cec53dd166dcb26ca43c2ae9/d57b7c6898fae90d586df16459730cc2226b4740

私はSVGコンテナに基づいて、縦横比を維持するためにそれ自体を修正する方法を示すために、2つの異なる行の8-4及び6-6列分割を使用しています。この例では "xMinYMin meet"を使用していますが、 "xMidYMid meet"と置き換えても最終出力には影響しません。

Answer 2

このSVGを拡大縮小し、アスペクト比がそのコンテナを満たしてもらいたいですか？ SVGは、「表示：ブロック」に設定されていることを確認し、使用してみてください： preserveAspectRatio =「xMidYMin会う」