基于d3js 5.5版本基礎(chǔ)教程
成都創(chuàng)新互聯(lián)主營開封網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機APP定制開發(fā),開封h5小程序開發(fā)搭建,開封網(wǎng)站營銷推廣歡迎開封等地區(qū)企業(yè)咨詢下載最新d3js文件, 參考: d3js官網(wǎng)
當前版本5.5, d3js v4與v3之間的api有一定的差異。
d3主要有兩個選擇器
select
選擇相應的dom元素, 如果有多個, 選擇第一個
selectAll
選擇所有的指定的dom元素.
通過選擇器可以選擇相應得dom元素, 而選擇器的語法基本就是css選擇器的語法.
css選擇器語法: http://www.w3school.com.cn/c***ef/css_selectors.asp
假設(shè)網(wǎng)頁有以下元素, 關(guān)于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后面增加一個內(nèi)容為空的p元素
insert
在選擇的元素里面或者前面增加一個元素,
示例1:
d3.select("body").insert("p") //與append方法一致
示例2:
d3.select("body").insert("p", "p") //第一個參數(shù)為要插入的元素, 第二個元素為before, 即首先通過第二個參數(shù)選擇相應位置,在這個選擇的元素之前插入一個元素
text
修改元素的文本內(nèi)容
示例:
d3.select("p").text("段落一修改后的內(nèi)容") // 將段落一的內(nèi)容修改為text函數(shù)傳入的參數(shù),如果傳入的文本包含html標簽,則會被轉(zhuǎn)義
html
修改元素內(nèi)容
示例:
d3.select("p").html("<div>段落一修改后的內(nèi)容</div>") // 將段落一的內(nèi)容修改為text函數(shù)傳入的參數(shù),如果傳入的文本包含html標簽,不會被轉(zhuǎn)義
attr
增加或者修改屬性(如果屬性已存在)
示例:
d3.select("svg rect").attr("width", 200) //將選擇的rect元素width屬性修改為200
style
增加或這修改樣式(如果屬性已存在)
示例:
d3.selectAll("p").style("color", "#ff0000") //選擇所有p元素,并將其文字顏色設(shè)置為紅色
property
增加或這修改樣式(如果屬性已存在)
示例:
d3.select("input").property("checked",true); //選擇第一input元素,將checked屬性設(shè)置為true
remove
將選定的元素刪除
示例:
d3.select("p").remove //選擇第一個p元刪除
d3與jQuery有一樣的鏈式操作, 只要操作合法你可以一直鏈接下去
示例:
//首先選擇第一個p元素然后將元素的文本內(nèi)容修改為'修改后內(nèi)容',并將其文字顏色設(shè)置為紅色
d3.select("p")
.text("修改后內(nèi)容")
.style("color", "red")
datum
將一個數(shù)據(jù)綁定到所有選擇的元素上
// 通過datum元素將"datum"數(shù)據(jù)傳入, 在text方法里面?zhèn)魅胍粋€箭頭函數(shù),而箭頭函數(shù)直接返回數(shù)據(jù)
d3.selectAll("p")
.datum("datum")
.text((d, i) => d)
// 修改后的內(nèi)容如下
...省略不相內(nèi)容
<p>datum</p>
<p>datum</p>
<p>datum</p>
data
傳入一組數(shù)據(jù),分別于選擇的元素一一綁定
// 通過datum元素將"datum"數(shù)據(jù)傳入, 在text方法里面?zhèn)魅胍粋€箭頭函數(shù),而箭頭函數(shù)直接返回數(shù)據(jù)
d3.selectAll("p")
.data([1,2,3])
.text((d, i) => d)
// 修改后的內(nèi)容如下
...省略不相關(guān)內(nèi)容
<p>1</p>
<p>2</p>
<p>3</p>
參考圖片內(nèi)容:
d3內(nèi)置數(shù)據(jù)加載的方法,可以解析比較常見的數(shù)據(jù)格式,主要有以下四種,這里主要以csv文件個數(shù)數(shù)據(jù)作為示例
csv文件內(nèi)容如下
//data.csv
name, age
zhangsan, 11
wangwu, 22
lisi, 33
// 加載csv
d3.csv("data.csv", (data) => {
console.log(data)
})
// 輸出, d3已經(jīng)將csv格式的數(shù)據(jù)解析成可識別的對象
{name: "zhangsan", " age": " 11"}
{name: "wangwu", " age": " 22"}
{name: "lisi", " age": " 33"}
d3自然也可以監(jiān)聽相應的事件。
常用事件如下:
// 選擇所有的p元素,當鼠標移到相應的p元素上面,p元素的字體顏色就會變成橙色,移出的時候就會變成紅色
d3.selectAll("p")
.on("mouseover", function(){
d3.select(this)
.style("color", "orange");
})
.on("mouseout", function() {
d3.select(this)
.style("color", "red");
})
可以通過以下四個過程使得選定的元素生成動態(tài)效果
transition
啟動動畫效果
duration
動畫時間,單位為毫秒
ease
過渡方式, 默認為線性過渡
delay
延遲時間,在指定的一段時間后才啟動動畫
// 選中第一個元素,先延遲延遲一秒,動畫時間2秒,在兩秒內(nèi)同時從默認的顏色漸變到紅色,字體大小從默認大小變成50px
d3.select("p")
.transition()
.delay(1000)
.duration(2000)
.style("background-color", "red")
.style("font-size", "50px")
由于使用的數(shù)值與圖片中的長寬數(shù)值有一定的差異,比如,圖片長度為500,但是數(shù)值都是在10以內(nèi), 我們做出來的圖一定是需要盡量的填充整個視圖,所以需要對源數(shù)據(jù)做一定的縮放, 下面介紹兩類縮放,d3本身有很多的縮放函數(shù)。
var data = [100, 400, 300, 900, 850, 1000];
var scale = d3.scaleLinear()
// 源數(shù)據(jù)數(shù)值范圍
.domain([0, d3.max(data)])
// 真實距離大小范圍,一般是展示區(qū)長寬
.range([0, 500]);
console.log(scale(20))
console.log(scale(800))
console.log(scale(1000))
輸出
10
400
500
// 常用于選區(qū)顏色
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有內(nèi)置的函數(shù)用于生成坐標軸
可選坐標軸
上面的上下左右主要指坐標周的刻度文字的位置,比如axisTop是指文字在橫軸上面
var width = 400,
height = 100;
var data = [10, 15, 20, 25, 30];
// 在body元素內(nèi)插入一個svg元素
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 創(chuàng)建一個線性縮放函數(shù)
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([0, width - 100]);
// 創(chuàng)建一個坐標軸,需傳入縮放函數(shù)
var x_axis = d3.axisBottom()
.scale(scale);
//在svg函數(shù)里面加入一個g元素,并創(chuàng)建坐標軸
svg.append("g")
.call(x_axis);
//旋轉(zhuǎn)坐標軸文字
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/
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
文章名稱:d3從入門到出門-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明:http://muchs.cn/article14/cddege.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、商城網(wǎng)站、品牌網(wǎng)站設(shè)計、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容