D3学习之画布制作

最近大半个月都和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：如果你是没有视频无法学习的视点怪的化，这有画布制作视频哦。　　　　

D3学习之画布制作

猜你喜欢