d3.jsのグラフをスマホ対応させるためのtips

今日思いついて比較てき汎用性高かったので。

たとえばd3.jsのグラフをレスポンシブ対応させる場合に、
windowサイズが欲しいわけですがその時に

<div id="aaa">
    <svg>...</svg>
</div>

となっているとして
よくあるsvgコンテナを作る部分の

var margin = {top: 20, right: 20, bottom: 40, left: 40},
    width = 600 - (margin.left + margin.right),
    height = 400 - (margin.top + margin.bottom);

を

var parentDiv = document.getElementById(id);
var margin = {top: 20, right: 20, bottom: 40, left: 40},
    width = parentDiv.offsetWidth - (margin.left + margin.right),
    height = 400 - (margin.top + margin.bottom);

として
cssで

#aaa {
    width: 80%;
}

とすればもうスマホ対応完了です。
もともとスマホ対応はCSSが得意なのでいっそそちらに任せてしまって、
jsでは値のみ取得するという役割分担できてる感じも素敵です。