最近大半个月都和d3斗争，学习艰辛（呜呜……）如果觉得作者写的对你有用，可以打赏作者哦！owo
起言：结合自己的学习之路，我认为要想使用d3画图搞清楚布局很重要，层次分明，就给了你很大的灵活性，写起代码来就不死板，本文就是给你解释svg在网页中的层次，当然，如果你想理解本文，你还需要一些html的基础知识作为铺垫。
一、【D3图表在html中的结构】
svg:可伸缩适量图像
g:一个分组的元素，相当于html中的div元素；图表都放到g元素中
由图标我们可以知道，svg是html网页的一个元素，g元素是svg中的一个块级元素（div）
上面的层级是这样的：首先我们在html的body元素中声明了一个ID是container的div元素
之后我们在container这个div元素中添加了一个svg画布
其次我们在svg中又添加了一个g元素，并进行了移位。
<!DOCTYPE html> <!--混合嵌入式代码的集合--> <html> <head> <meta charset="utf-8"> <title>画布制作</title> <style> #container{ background: #ddd; width: 500px; height: 250px; } </style> </head> <body> <div id="container"> </div> <script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script><!--d3在线引用文档--> <script> var svg=d3.select("#container")/*使用select选择了div(container）元素*/ .append("svg")//在container元素中使用append函数添加了一个svg画布 .attr("width",450)//attr是attribute的缩写,so,可以使用attr给svg添加属性 .attr("height",200);/*在svg中我把宽高分别设置为了450、200px； 特意与div(container）元素加以区分，以理解D3图表在html中的结构*/ d3.select("svg")//此时选中的svg是上面定义的svg及其复加的内容 .append("g")//添加g元素 .attr("transform","translate(50,30)");//设置偏移量 </script> </body> </html>
上面的代码是可以运行的，可以下载来亲自试一下效果会更好。
设置偏移量的时候涉及到了html网页坐标，在这就简单介绍一下;
网页页面的原点在左上角，绘图的坐标系是如上图所示的。
总结：本章介绍了svg元素和g元素在网页页面中的所处的位置，建立了设置svg画布的模型，
如果你是一个希望利用d3来实现数据可视化的玩家的话，本教程很适合你，记得点赞打赏哦。
TIPS：如果你是没有视频无法学习的视点怪的化，这有画布制作视频哦。
