D3.jsをレスポンシブ対応させる（SVG自体を拡大縮小する）

備忘録的に。
svg内の各要素すべてを書き換える方法もあるがここではsvg全体を丸ごと拡大縮小するやり方。

まずは htmlでsvgを記述。 id,width,heigthを設定する。

<svg id="field" width="500" height="300"
 viewBox="0 0 500 300"
 preserveAspectRatio="xMidYMid meet">
</svg>

viewBoxは左上の原点(0,0) からの座標と width , height を対応させるやつ。ここでは同じ値で対応させる。
（d3.scale の domain , range みたいな感じかな？）
詳しくはこっち
SVGコードの基本 | CodeGrid

preserveAspectRatio は細かい縮小拡大の方向の微調整。デフォルト値で "xMidYMid meet"
詳しくはこっち
（座標系, 変換, 単位 – SVG 1.1 （第２版））
（ゲームミュージックと生存確認をかねた画期的な: svgのpreserveAspectRatio属性の動作検証）

以下

jQueryを使う方法、

D3.jsを使う方法の２つ

* jQueryを使う方法（http://jsfiddle.net/shawnbot/BJLe6/）

var width=500;
var height=300; 

var chart = $("#field"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();

$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");

やってることは、アス比の計算、新しいウィンドウのサイズ取得、svg要素に適応

* D3.jsを使う方法（javascript - Whats the best way to make a d3.js visualisation layout responsive? - Stack Overflow）

var  chart = d3.select('#field');

var width=500;
var height=300;
var aspect = width / height;



d3.select(window)
  .on("resize", function() {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
  });

D3の場合CSSに以下の記述が必要

#field{ width:100%; }

あとはsvg内に各要素を描画すればOK