d3のコンテナdivのサイズに合わせてSVGを拡大/縮小するにはどうすればよいですか？

Question

私のSVGスケールを#mapDivの次元にする方法はありますか？

HTML：

<div id="mapDiv"> 
    <svg id="mapSVG" width="960" height="600" viewbox="0 0"></svg> 
</div> 

JS：

var svg = d3.select("#mapSVG"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

CSS：

#mapDiv{ 
    border: 2px solid #000; 
    border-radius: 7px; 
    float: left; 
    width: 50%; 
} 

#mapSVG{ 
    display: block; 
    margin: auto; 
} 

ページを経由して、サイズが変更されたとき、私はスケールにSVGを必要としません。ページが読み込まれるときにSVGがdivサイズに拡大される限り、それは私のために十分です。

Answer 1

あなたはCSSのソリューションを探しているなら、単に与えるあなた#mapDivheightとwidth固定し、その後、svg要素の幅と高さの両方の100%を取る持っています。これは、次のように見ることができます。

#mapDiv { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 

 
#mapDiv > svg { 
 
    border: 5px solid black; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="mapDiv"> 
 
    <svg id="mapSVG" width="960" height="600" viewbox="0 0 960 600"> 
 
    </svg> 
 
</div>

は、この情報がお役に立てば幸い！ :)