css - SVG要素を再スケーリングする方法

Question

私は D3.js から始めて、非常に基本的な図を作成しています。<svg>タグの幅について質問です。ユーザーがウィンドウ サイズを変更したときに、svg の幅を調整するにはどうすればよいですか? レスポンシブなsvgを作ることです...

svg のビューポートが図をペイントするゾーンを区切ることを理解していますが、に割り当てると、私のviewport="0 0 100% 100%"ように機能しません。

私は次のコードを持っています：

HTML

<div id="main">
    <h3>Graph title</h3>
    <div class="graph">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
    </div>
</div>

CSS

body, h3 {
    position: relative;
    margin:0px; 
    padding:0px;
}

#main {
    position: relative; 
    width: 80%;
    border: 1px solid #000;
    border-radius: 4px;
    margin: 0 auto;
    padding: 10px;
}

.graph{position: relative;}

svg {
    position: relative;
    width: 100%;
}

私はcssについて何かだと思います...ここに、いくつかのデータを含むjsfiddleの例があります。