如何缩放我的SVG以适应它在d3中的容器div的大小？

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大小，对我来说就足够了。