D3.js - 選擇 API
選擇是文件物件模型(DOM)的強大資料驅動轉換。它用於設定屬性,樣式,屬性,HTML 或文字內容等等。本章詳細介紹了選擇 API。
配置 API
你可以使用下面的指令碼直接配置 API。
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>
</script>
選擇 API 方法
以下是選擇 API 中最重要的方法。
d3.selection()
- d3.select(selector)
- d3.selectAll(selector)
- selection.selectAll(selector)
- selection.filter(filter)
- selection.merge(other)
- d3.matcher(selector)
- d3.creator(name)
- selection.each(function)
- selection.call(function [, arguments …])
d3.local()
- local.set(node, value)
- local.get(node)
- local.remove(node)
現在讓我們詳細討論其中的每一個。
d3.selection()
此方法用於選擇根元素。此功能還可用於測試選擇或擴充套件選擇 d3js。
d3.select(selector)
此方法用於選擇與指定選擇器字串匹配的第一個元素。
示例 - 讓我們考慮以下示例。
var body = d3.select("body");
如果選擇器不是字串,則它選擇指定的節點,該節點在下面定義。
d3.select("p").style("color", "red");
d3.selectAll(selector)
此方法選擇與指定選擇器字串匹配的所有元素。
示例 - 讓我們考慮以下示例。
var body = d3.selectAll("body");
如果選擇器不是字串,那麼它選擇節點的指定的陣列,其定義如下。
d3.selectAll("body").style("color", "red");
selection.selectAll(selector)
此方法用於選擇元素。它選擇與指定選擇器字串匹配的後代元素。返回選擇中的元素按此選擇中的相應父節點分組。如果沒有元素與當前元素的指定選擇器匹配,或者選擇器為 null,則當前索引處的組將為空。
示例 - 讓我們考慮以下示例。
var b = d3.selectAll("p").selectAll("b");
selection.filter(filter)
此方法用於過濾選擇,返回僅包含指定過濾器為 true 的元素的新選擇。
示例 - 讓我們考慮以下示例。
var even = d3.selectAll("tr").filter(":nth-child(odd)");
這裡,過濾選擇的錶行只返回奇數。
selection.merge(other)
此方法用於返回與指定的其他選擇合併的新選擇。
示例 - 讓我們考慮以下示例。
var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);
d3.matcher(selector)
此方法用於分配指定的選擇器。它返回一個返回 true 的函式。
示例 - 讓我們考慮以下示例。
var p = selection.filter(d3.matcher("p"));
d3.creator(name)
此方法用於分配指定的元素名稱它返回一個函式,該函式建立給定名稱的元素,假設這是父元素。
示例 - 讓我們考慮以下示例。
selection.append(d3.creator("p"));
selection.each(function)
此方法用於為當前資料(d),當前索引(i)和當前組(node)傳遞的順序呼叫每個選定元素的指定函式,並將其作為當前 DOM 元素(節點[i] ])。這將在下面解釋。
parent.each(function(p, j) {
d3.select(this)
.selectAll(".child")
.text(function(d, i) { return "child " + d.name + " of " + p.name; });
});
selection.call(function [, arguments …])
它用於僅呼叫指定的函式一次。語法如下所示。
function name(selection, first, last) {
selection.attr("first-name", first).attr("last-name", last);
}
可以如下所示指定此方法。
d3.selectAll("p").call(name, "Adam", "David");
d3.local()
D3 local 允許你定義獨立於資料的本地狀態。
示例 - 讓我們考慮以下示例。
var data = d3.local();
與 var 不同,每個區域性的值也由 DOM 限定。
local.set(node,value)
此方法將指定節點上此 local 的值設定為該值。
示例 - 讓我們考慮以下示例。
selection.each(function(d)
{ data.set(this, d.value); });
local.get(node)
此方法返回指定節點上此 local 的值。如果節點未定義此本地,則它返回定義它的最近祖先的值。
local.remove(node)
此方法從指定節點中刪除此本地值。如果定義了節點,則返回 true,否則返回 false。