當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

d3.js中的选择元素

發布時間：2024/1/23 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 d3.js中的选择元素小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在 D3 中，用于選擇元素的函數有兩個：

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

這兩個函數返回的結果稱為選擇集。

怎么使用這2個函數呢？看代碼：

var body = d3.select("body"); //選擇文檔中的body元素 var p1 = body.select("p"); //選擇body中的第一個p元素 var p = body.selectAll("p"); //選擇body中的所有p元素 var svg = body.select("svg"); //選擇body中的svg元素 var rects = svg.selectAll("rect"); //選擇svg中所有的svg元素

下面我們看看這2個函數源碼，在d3.js的985和990行，如下：

d3.select = function(node) {var group = [ typeof node === "string" ? d3_select(node, d3_document) : node ];group.parentNode = d3_documentElement;return d3_selection([ group ]); }; d3.selectAll = function(nodes) {var group = d3_array(typeof nodes === "string" ? d3_selectAll(nodes, d3_document) : nodes);group.parentNode = d3_documentElement;return d3_selection([ group ]); };這里可以看到，首先得到一個group對象 typeof node === "string" 判斷node類型為string的，如果為真，分別返回： d3_select(node, d3_document)和d3_selectAll(nodes, d3_document)
node是你要選中的元素，那么出現的
d3_document和d3_documentElement分別是什么呢？請看下面這行代碼的定義： var d3_document = document, d3_documentElement = d3_document.documentElement, d3_window = window; 從這兒就應該明白了，document和document.documentElement,這是dom操作。
注：這是html中的知識

每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。

Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

繼續往下看，最后通過d3_selection()函數返回。
function d3_selection(groups) {d3_subclass(groups, d3_selectionPrototype);return groups; }然后用到d3_subclass()函數，直接看代碼：
d3_selectionPrototype是這樣定義的： var d3_selectionPrototype = d3.selection.prototype = []; 繼續看 var d3_subclass = {}.__proto__ ? function(object, prototype) {object.__proto__ = prototype; } : function(object, prototype) {for (var property in prototype) object[property] = prototype[property]; };這是什么？見過嗎？其實在
Javascript中Function,Object,Prototypes,__proto__等概念是很常用的。不懂得自己查查。
可以認為__proto__是用來擴展Function的，擴展出來的函數，可以直接調用，不需要new出對象才能用，同時對象是不會擴展通過__proto__擴展的方法或屬性的。

通過以上，我們對這2個函數的調用方式有了一個清楚的了解，后續直接應用就可以了。select返回一個元素；selectAll()返回一個數組，然后遍歷使用。

最后上一個小demo:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>HelloWorld</title><script src="../libs/d3.min.js" charset="utf-8"></script> </head> <body> <p>Hello World 1</p> <p>Hello World 2</p> </body> </html><script>//d3.select("body").selectAll("p").text("www.ourd3js.com"); //選擇<body>中所有的<p>，其文本內容為 www.ourd3js.com，選擇集保存在變量 p 中 var p = d3.select("body").selectAll("p").text("www.ourd3js.com");//修改段落的顏色和字體大小 p.style("color","red").style("font-size","72px"); </script>

總結

以上是生活随笔為你收集整理的d3.js中的选择元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

元素
js