使用D3製做圖表（1）--畫布繪製

時間 2019-11-12

標籤使用 d3 製做圖表畫布繪製简体版

原文原文鏈接

　　使用D3繪製圖表可使數據更加直觀。javascript

　　使用D3前要先加載D3庫，這裏有兩種方式，一種是在線加載<script type="text/javascript" src="http://d3js.org/d3.v3.js" ></script>,另外一種是下載D3庫，我是直接在百度裏面搜索」D3 js 下載「而後下載的，下載後放入項目中，而後引入到html頁面裏面就能夠了。這裏聲明一下，大部分時候咱們都把引入js文件的語句放在頁面的最下面，這是由於js中的一些方法要使用html裏面的一些內容，把js文件的引入放在最後面就不會出錯。css

　　1.html代碼
html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script type="text/javascript" src="js/d3.js" ></script>
    <script type="text/javascript" src="js/index.js" ></script>
</html>

　　2.css樣式java

#container {
    width: 500px;
    height: 250px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 100px;
}

　　3.index.js代碼（畫布的繪製在這裏面完成，這裏使用了D3庫，因此這個js文件的引入在d3下面）瀏覽器

//獲取div，向裏面添加svg
var svg = d3.select("#container")
.append("svg:svg")//在「container」中插入svg
.attr("width", 500)//設置svg的寬度
.attr("height", 250)//設置svg的高度

//添加g元素
d3.select("svg")//使用「select」函數選擇svg
.append("g")//在svg中插入g
.attr("transform","translate(50,25)")//設置g的偏移量

上面是在開發者模式下的截圖，咱們能夠看到svg和g都被添加到了div裏面，這樣畫布的繪製就完成了。你們在學習和練習是要多使用瀏覽器的開發者模式，這樣很方便修改。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。