D3最佳实践：001 整体布局

D3 学习系列1

对于D3的例子看的多了，很多初学者都会看到很多D3的例子都是以这个的风格开始的：

var margin = {top:30,left:30,right:30,bottom:30},
width = 600-margin.left-margin.right,
height = 400-margin.top-margin.bottom;

这种风格的声明，一次性就把我们的绘图边界定义了。在D3中之所以留绘图边界，是因为我们绘制的图形的标题、坐标轴的说明、绘图元素的示例等的绘图元素一般是被放在图形的边界中的，边界里面的东西就是我们的真正的绘图区域了，所以在很多的D3的绘图样例中，我们采用这样的方式把我们的绘图区域固定到边界以内的：

var svg = d3.select("body").append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","franslate("+margin.left+","+margin.right+")");

这样我们我们得到的变量svg真正表示的绘图区域就是我们在最后追加进来的那个g，g的原点位置已经被我们使用transform变换到了(margin.left,margin.top) 这一点。