前言
基於d3js 5.5版本基礎教程
環境配置
下載最新d3js文件, 參考: d3js官網
當前版本5.5, d3js v4與v3之間的api有一定的差異。
選擇元素
d3主要有兩個選擇器
-
select
選擇相應的dom元素, 如果有多個, 選擇第一個
-
selectAll
選擇所有的指定的dom元素.
通過選擇器可以選擇相應得dom元素, 而選擇器的語法基本就是css選擇器的語法.
css選擇器語法: http://www.w3school.com.cn/c***ef/css_selectors.asp
增刪查改
假設網頁有以下元素, 關於d3的元素操作都將引用本段落
// 省略html,head等標籤
<body>
<input type="checkbox">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<svg><rect></rect></svg>
</body>元素增加
-
append
在選擇的元素中增加一個子元素,
示例: d3.select("body").append("p") //將會在svg後面增加一個內容爲空的p元素 -
insert
在選擇的元素裏面或者前面增加一個元素,
示例1: d3.select("body").insert("p") //與append方法一致 示例2: d3.select("body").insert("p", "p") //第一個參數爲要插入的元素, 第二個元素爲before, 即首先通過第二個參數選擇相應位置，在這個選擇的元素之前插入一個元素內容修改
-
text
修改元素的文本內容
示例: d3.select("p").text("段落一修改後的內容") // 將段落一的內容修改爲text函數傳入的參數，如果傳入的文本包含html標籤，則會被轉義 -
html
修改元素內容
示例: d3.select("p").html("<div>段落一修改後的內容</div>") // 將段落一的內容修改爲text函數傳入的參數，如果傳入的文本包含html標籤，不會被轉義
屬性增加修改
-
attr
增加或者修改屬性(如果屬性已存在)
示例: d3.select("svg rect").attr("width", 200) //將選擇的rect元素width屬性修改爲200 -
style
增加或這修改樣式(如果屬性已存在)
示例: d3.selectAll("p").style("color", "#ff0000") //選擇所有p元素，並將其文字顏色設置爲紅色 -
property
增加或這修改樣式(如果屬性已存在)
示例: d3.select("input").property("checked",true); //選擇第一input元素，將checked屬性設置爲true
元素刪除
-
remove
將選定的元素刪除
示例: d3.select("p").remove //選擇第一個p元刪除
鏈式操作
d3與jQuery有一樣的鏈式操作, 只要操作合法你可以一直鏈接下去
示例:
//首先選擇第一個p元素然後將元素的文本內容修改爲'修改後內容',並將其文字顏色設置爲紅色
d3.select("p")
.text("修改後內容")
.style("color", "red") 數據綁定與加載
數據綁定
-
datum
將一個數據綁定到所有選擇的元素上
// 通過datum元素將"datum"數據傳入, 在text方法裏面傳入一個箭頭函數，而箭頭函數直接返回數據 d3.selectAll("p") .datum("datum") .text((d, i) => d) // 修改後的內容如下 ...省略不相內容 <p>datum</p> <p>datum</p> <p>datum</p> -
data
傳入一組數據，分別於選擇的元素一一綁定
// 通過datum元素將"datum"數據傳入, 在text方法裏面傳入一個箭頭函數，而箭頭函數直接返回數據 d3.selectAll("p") .data([1,2,3]) .text((d, i) => d) // 修改後的內容如下 ...省略不相關內容 <p>1</p> <p>2</p> <p>3</p> - update, enter, exit
參考圖片內容:
網絡數據加載
d3內置數據加載的方法，可以解析比較常見的數據格式，主要有以下四種，這裏主要以csv文件個數數據作爲示例
- d3.csv
- d3.json
- d3.tsv
- d3.xml
csv文件內容如下
//data.csv
name, age
zhangsan, 11
wangwu, 22
lisi, 33
// 加載csv
d3.csv("data.csv", (data) => {
console.log(data)
})
// 輸出, d3已經將csv格式的數據解析成可識別的對象
{name: "zhangsan", " age": " 11"}
{name: "wangwu", " age": " 22"}
{name: "lisi", " age": " 33"}
事件
d3自然也可以監聽相應的事件。
常用事件如下:
// 選擇所有的p元素，當鼠標移到相應的p元素上面，p元素的字體顏色就會變成橙色，移出的時候就會變成紅色
d3.selectAll("p")
.on("mouseover", function(){
d3.select(this)
.style("color", "orange");
})
.on("mouseout", function() {
d3.select(this)
.style("color", "red");
})動畫
可以通過以下四個過程使得選定的元素生成動態效果
-
transition
啓動動畫效果
-
duration
動畫時間，單位爲毫秒
-
ease
過渡方式, 默認爲線性過渡
-
delay
延遲時間，在指定的一段時間後才啓動動畫
// 選中第一個元素，先延遲延遲一秒，動畫時間2秒，在兩秒內同時從默認的顏色漸變到紅色，字體大小從默認大小變成50px
d3.select("p")
.transition()
.delay(1000)
.duration(2000)
.style("background-color", "red")
.style("font-size", "50px")縮放
由於使用的數值與圖片中的長寬數值有一定的差異，比如，圖片長度爲500，但是數值都是在10以內, 我們做出來的圖一定是需要儘量的填充整個視圖，所以需要對源數據做一定的縮放, 下面介紹兩類縮放，d3本身有很多的縮放函數。
線性縮放
var data = [100, 400, 300, 900, 850, 1000];
var scale = d3.scaleLinear()
// 源數據數值範圍
.domain([0, d3.max(data)])
// 真實距離大小範圍，一般是展示區長寬
.range([0, 500]);
console.log(scale(20))
console.log(scale(800))
console.log(scale(1000))
輸出
10
400
500離散縮放
// 常用於選區顏色
var index = [0, 1, 2, 3, 4]
var color = ["red", "blue", "green", "yellow", "black"]
var ordinal = d3.scaleOrdinal()
.domain(index)
.range(color)
console.log(ordinal(1))
console.log(ordinal(4))
console.log(ordinal(100))
//輸出
blue
black
blue座標軸
常見圖標展示一般都會帶有座標軸，因爲座標軸是一個很常用的功能，所以d3有內置的函數用於生成座標軸
可選座標軸
- axisTop
- axisRight
- axisBottom
- axisLeft
上面的上下左右主要指座標周的刻度文字的位置，比如axisTop是指文字在橫軸上面
var width = 400,
height = 100;
var data = [10, 15, 20, 25, 30];
// 在body元素內插入一個svg元素
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 創建一個線性縮放函數
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([0, width - 100]);
// 創建一個座標軸，需傳入縮放函數
var x_axis = d3.axisBottom()
.scale(scale);
//在svg函數裏面加入一個g元素，並創建座標軸
svg.append("g")
.call(x_axis);
座標軸微調
//旋轉座標軸文字
d3.selectAll("svg > g text")
.attr("transform", "rotate(45)")
// 文字沿當前方向距離軸位置大小
.attr("y", 20)柱狀圖
柱狀圖示例
參考: http://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js
餅圖
參考: http://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js
後記
之所以叫做從入門到出門, 是因爲本人學得很快, 忘得更快。
參考鏈接
https://d3js.org/
http://www.tutorialsteacher.com/d3js
http://www.ourd3js.com/wordpress/396/