iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

從原料到燃料,從資料到預料—資料駕馭網頁之理科的美學系列 第 4

D3JsDay04一同來見識 D3起手式—用D3寫Helloworld

如何開始D3js

方法一 使用CDN

請google搜尋D3Js到D3Js的官方網站。

滑鼠滾輪到下方處
複製<script src="https://d3js.org/d3.v7.min.js"></script>
D3Js官方網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
</body>
</html>

把它複製貼到你的HTML頁面就可以了

方法二 去官方網站下載壓縮檔

另外也可以在下方d3-7.0.1.tgz下載

解壓縮之後會看到如下圖

dist的資料夾

d3.js或者d3.min.js擇一複製到你的專案資料夾底下就可以了

方法三 npm install d3

有用npm(node套件包管理工具)的人也可以使用npm install d3就會自動下載d3的資源包了。

檢測是否有安裝成功

使用開發者人員工具的console欄位鍵入d3.version

第一個d3

有用過jQuery的人起手式大概很熟悉的是$字號做開頭,d3是類似的方式,使用d3來做開頭後續使用方法鏈(method chain)的方式來實作每個步驟。

先直接看以下程式碼

<script>
  d3.select("body").append("div");
</script>

可以看到先選擇了body這個tag,然後在裡面插入div,於是打開開發者人員工具

在底下插入了一個div
這邊語法講解select()是選到第一個出現的元素
然後append()是插入一個元素,換句話說如果我們選擇的元素有兩個一樣,只會選到第一個元素參見以下程式碼

<div class="hello">
</div>
<div class="hello">
</div>
<script>
  d3.select(".hello").append("div");
</script>


這個時候打開開發者人員工具會發現只有第一個class名為hello的底下有插入div這個元素
因此如果想要選取多個元素要改用selectAll()來選取多個元素

程式碼變成以下

d3.selectAll(".hello").append("div");

當打開開發者人員工具就可以發現成功插入兩個div元素了。

接下來我們要在新增的div底下插入文字

 d3.select("body").append("div").text("Helo world");

畫面就會出現如下面

以上介紹如何安裝D3和撰寫一個Hello World下一篇將會使用D3來畫出一些簡單的圖表

參考API文件說明

API文件參考select()
API文件參考append()
API文件參考selectAll()
API文件參考text()


上一篇
D3JsDay03可縮放向量圖型 不用怕圖片不行—SVG簡介
下一篇
D3JsDay05Bar拉BarBarBar,作伙來畫吧—畫個bar chart長條圖
系列文
從原料到燃料,從資料到預料—資料駕馭網頁之理科的美學30

尚未有邦友留言

立即登入留言