布局(layout)是一个函数，将要可视化的数据data放入布局函数中，经过算法处理，返回方便d3绘图的数据。同时，布局函数并不直接参与绘图，只是告诉你绘图所用的关键信息
绘图步骤
- charts等开箱即用的框架
数据->绘制函数->图表
- d3.js
数据->布局函数->获得绘图需要的数据->添加相应的图形->图表
主要布局种类
D3 总共提供了 12 个布局
- 直方图（Histogram）
饼状图（Pie）、力导向图（Force）、弦图（Chord）、捆图（Bundle）、堆栈图（Stack）
- 层级图（Hierarchy）
树状图（Tree）、集群图（Cluster）、打包图（Pack）、分区图（Partition）、矩阵树图（Treemap）
12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。
设置获取d3.js svg 元素
//1
// <svg width="500" height="500"></svg>
var svg = d3.select("svg")
//2
var svg = d3.select("body").append("svg").attr("width",200).attr("height",200);
//3
// <div id="div-svg"></div>
var svgSelection2=d3.select("#div-svg").append("svg")
.attr("width",900)
.attr("height",500)
.style("background-color","lightgreen");
//4
var body = d3.select("body");
var svg = d3.create("svg").attr("width", 200).attr("height", 200);
body.node().appendChild(svg.node());
//或
// var dome = document.getElementById('svgAll');
// dome.appendChild(svg.node());
