請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(node套件包管理工具)的人也可以使用npm install d3就會自動下載d3的資源包了。
使用開發者人員工具的console欄位鍵入d3.version
有用過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()
iThome鐵人賽
看影片追技術