d3中图表大小自适应区域大小

d3中的图表是使用SVG绘制的，所以图表适应实质还是SVG的自适应大小。

为此，对于图表的父元素比如div.container 元素，自然就是使用类似百分比布局的方式实现放缩：

.container{    height:80%;    width:80%;}

那么其中的svg元素就是类似这样的样式：

svg{    height:100%;    width:100%;}

绘制SVG时候代码改为如下：

var svg = d3.select(".container")            .append("svg")            .attr("preserveAspectRatio", "xMidYMid meet")            .attr("viewBox", "0 0 400 400")

而不是常规的：

....attr("width", "400").attr("height", "400")

具体实现原理可自行查询关于preserveAspectRatio 和 viewBox 的详细内容，可以理解为对整体实现了放大缩小，因为我们没有在其它地方修改关于width 和 height 的代码。

效果：

参考链接：
http://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

---

此文档的作者：justforuse
Github Pages：justforuse