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)

此方法用於選擇與指定的 selector 字串匹配的第一個元素。

示例 - 讓我們考慮以下示例。

var body = d3.select("body");

如果 selector 不是字串，則它選擇指定的節點，如下所示。

d3.select("p").style("color", "red");

d3.selectAll(selector)

此方法選擇所有與指定的 selector 字串匹配的元素。

示例 - 讓我們考慮以下示例。

var body = d3.selectAll("body");

如果 selector 不是字串，則它選擇指定的節點陣列，如下所示。

d3.selectAll("body").style("color", "red");

selection.selectAll(selector)

此方法用於選擇元素。它選擇與指定 selector 字串匹配的子元素。返回的選擇中的元素按此選擇中相應的父節點進行分組。如果當前元素沒有與指定 selector 匹配的元素，或者 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)

此方法用於返回一個與指定的 other 選擇合併的新選擇。

示例 - 讓我們考慮以下示例。

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher(selector)

此方法用於分配指定的 selector。它返回一個函式，該函式返回 true。

示例 - 讓我們考慮以下示例。

var p = selection.filter(d3.matcher("p"));

d3.creator(name)

此方法用於分配指定的元素名稱。它返回一個函式，該函式建立一個給定名稱的元素，假設這是父元素。

示例 - 讓我們考慮以下示例。

selection.append(d3.creator("p"));

selection.each(function)

此方法用於為每個選定元素呼叫指定的函式，順序由當前資料 (d)、當前索引 (i) 和當前組 (nodes) 傳遞，其中 this 為當前 DOM 元素 (nodes[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 不同，每個 local 的值也由 DOM 限定作用域。

local.set(node, value)

此方法將此 local 在指定節點上的值設定為 value。

示例 - 讓我們考慮以下示例。

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

此方法返回此 local 在指定節點上的值。如果節點未定義此 local，則它返回定義它的最近祖先的值。

local.remove(node)

此方法從指定節點刪除此 local 的值。如果節點已定義，則返回 true，否則返回 false。