當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

d3.js中选择元素和绑定数据

發(fā)布時(shí)間：2024/1/23 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 d3.js中选择元素和绑定数据小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

回顧一下如何選擇元素

在 D3 中，用于選擇元素的函數(shù)有兩個(gè)：

d3.select()：是選擇所有指定元素的第一個(gè)
d3.selectAll()：是選擇指定元素的全部

這兩個(gè)函數(shù)返回的結(jié)果稱(chēng)為選擇集。

如何綁定數(shù)據(jù)

D3 有一個(gè)很獨(dú)特的功能：能將數(shù)據(jù)綁定到 DOM 上，也就是綁定到文檔上。這么說(shuō)可能不好理解，例如網(wǎng)頁(yè)中有段落元素 p 和一個(gè)整數(shù) 5，于是可以將整數(shù) 5 與 p 綁定到一起。綁定之后，當(dāng)需要依靠這個(gè)數(shù)據(jù)才操作元素的時(shí)候，會(huì)很方便。

D3 中是通過(guò)以下兩個(gè)函數(shù)來(lái)綁定數(shù)據(jù)的：

datum()：綁定一個(gè)數(shù)據(jù)到選擇集上
data()：綁定一個(gè)數(shù)組到選擇集上，數(shù)組的各項(xiàng)值分別與選擇集的各元素綁定

相對(duì)而言，data() 比較常用。

直接看demo:

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="../libs/d3.min.js" charset="utf-8"></script> </head> <body> <p>Apple</p> <p>Pear</p> <p>Banana</p> </body> </html><script>/* var str = "china"; var body = d3.select("body"); var p = body.selectAll("p"); p.datum(str); p.style("color","red") .style("font-size","72px"); p.text(function(d, i){ return "第 "+ i + " 個(gè)元素綁定的數(shù)據(jù)是 " + d; }); */ var dataset = ["I like dog","I like cat","I like snake"];var body = d3.select("body");var p = body.selectAll("p");p.data(dataset).text(function(d, i){return d;});p.style("color","red").style("font-size","72px"); </script>

總結(jié)

以上是生活随笔為你收集整理的d3.js中选择元素和绑定数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。