Featured image of post D3.jsでレスポンシブ・レイアウトを実現するには
technology

D3.jsでレスポンシブ・レイアウトを実現するには

D3.jsでレスポンシブ・レイアウトを

最近はウェブの閲覧環境が多様化し、PCとモバイルでは画面解像度が全くことなります。
D3.jsでなにかを作る際、ワンソースで多様な閲覧環境に対応するための、レスポンシブ・レイアウト対応方法の一つを以下に紹介します。

D3.jsはSVGを使っている

そこで、SVGが標準でサポートしている属性を使います。
個別の要素の大きさをすべて調整するのは大変なので、一番親要素のSVGの大きさを変更することで対応することにします。

viewBoxとpreserveAspectRatioの設定

viewBoxとpreserveAspectRatioという属性の設定をします。
これはSVGが拡大表示されたときの振る舞いを決定するものです。

1
2

.attr("viewBox", "0 0 960 400")
.attr("preserveAspectRatio", "xMidYMid")

viewBoxの値は、“0 0 width height” とします（widthとheightは整数）。
preserveAspectRatioの値は xMidYMid とします。これでviewBoxのX/Y中央値を、ビューポートのX/Yの中央値に揃えることになります。

ウインドウサイズが変更した際に、SVGの大きさも変更する 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var chart = $("#chart"),
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の親要素の横幅を取得し、SVGをその大きさに合わせます。
縦幅は独自には取得せず、横幅との比率で処理をします。

サンプルコード

参考リンク

© 2013 - 2024 Yuichi Yazaki