D3學習之畫布製做

時間 2019-11-07

標籤 d3 學習畫布製做简体版

原文原文鏈接

最近大半個月都和d3鬥爭，學習艱辛（嗚嗚……）若是以爲做者寫的對你有用，能夠打賞做者哦！owocss

起言：結合本身的學習之路，我認爲要想使用d3畫圖搞清楚佈局很重要，井井有條，就給了你很大的靈活性，寫起代碼來就不死板，本文就是給你解釋svg在網頁中的層次，固然，若是你想理解本文，你還須要一些html的基礎知識做爲鋪墊。html

1、【D3圖表在html中的結構】
　　　svg:可伸縮適量圖像
　　　g:一個分組的元素，至關於html中的div元素；圖表都放到g元素中app

　　由圖標咱們能夠知道，svg是html網頁的一個元素，g元素是svg中的一個塊級元素（div）ide

　　上面的層級是這樣的：首先咱們在html的body元素中聲明瞭一個ID是container的div元素svg

　　　　　　　　　　　　以後咱們在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>