D3学习之画布制作

最新推荐文章于 2024-05-30 21:07:35 发布

weixin_30505751

最新推荐文章于 2024-05-30 21:07:35 发布

阅读量351

点赞数

文章标签：嵌入式

原文链接：http://www.cnblogs.com/gti2baby/p/11264971.html

版权

最近大半个月都和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>