修改元素

選取元素後，使用選取修改元素。例如，若要設定當前文件中所有段落元素的類別和顏色樣式

d3.selectAll("p")
    .attr("class", "graf")
    .style("color", "red");

選取方法通常會傳回當前選取或新的選取，允許透過方法串接在給定的選取上簡潔地套用多個操作。上述程式碼等同於

const p = d3.selectAll("p");
p.attr("class", "graf");
p.style("color", "red");

選取是不可變的。所有影響哪些元素被選取（或它們的順序）的選取方法都會回傳一個新的選取，而不是修改目前的選取。然而，請注意元素必定是可變的，因為選取會驅動文件轉換！

selection.attr(name, value)

來源 · 如果指定了 value，則在選取的元素上設定具有指定 name 的屬性為指定的值，並回傳此選取。

selection.attr("color", "red")

如果 value 是常數，則所有元素都會給予相同的屬性值；否則，如果 value 是函式，則會依序對每個選取的元素評估，傳遞目前的資料（d）、目前的索引（i）和目前的群組（nodes），其中 this 是目前的 DOM 元素（nodes[i]）。然後函式的回傳值會用來設定每個元素的屬性。空值會移除指定的屬性。

selection.attr("color") // "red"

如果未指定 value，則回傳選取中第一個（非空值）元素的指定屬性的目前值。這通常僅在您知道選取只包含一個元素時才有用。

指定的 name 可能有命名空間前綴，例如 xlink:href，用來指定 XLink 命名空間中的 href 屬性。請參閱命名空間以取得支援的命名空間對應；可以透過新增到對應中來註冊其他命名空間。

selection.classed(names, value)

來源 · 如果指定了 value，則透過設定 class 屬性或修改 classList 屬性，在選取的元素上指定或取消指定 CSS 類別 names，並回傳此選取。

selection.classed("foo", true)

指定的 names 是以空白分隔的類別名稱字串。例如，要將類別 foo 和 bar 指定給選取的元素

selection.classed("foo bar", true)

如果 value 為真值，則所有元素都會指定指定的類別；否則，類別會被取消指定。

selection.classed("foo", () => Math.random() > 0.5)

如果 value 是函式，則會依序對每個選取的元素評估，傳遞目前的資料（d）、目前的索引（i）和目前的群組（nodes），其中 this 是目前的 DOM 元素（nodes[i]）。然後函式的回傳值會用來在每個元素上指定或取消指定類別。

selection.classed("foo") // true, perhaps

如果未指定 value，則僅當第一個（非空值）選取的元素具有指定的 classes 時才回傳 true。這通常僅在您知道選取只包含一個元素時才有用。

selection.style(name, value, priority)

原始碼 · 如果指定了值，則會在選取的元素上將樣式屬性設為指定名稱和值，並傳回此選取。

selection.style("color", "red")

如果值是常數，則所有元素都會取得相同的樣式屬性值；否則，如果值是函式，則會依序針對每個選取的元素評估該函式，並傳遞目前的資料項 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素 (nodes[i])。然後使用函式的傳回值來設定每個元素的樣式屬性。Null 值會移除樣式屬性。也可以指定一個選用的優先順序，可以是 Null 或字串 important (不含驚嘆號)。

selection.style("color") // "red"

如果未指定值，則會傳回選取中第一個 (非 Null) 元素的指定樣式屬性的目前值。目前值定義為元素的內嵌值 (如果存在)，否則為其計算值。只有在您知道選取只包含一個元素時，存取目前的樣式值通常才有用。

注意事項

與許多 SVG 屬性不同，CSS 樣式通常有相關的單位。例如，3px 是有效的畫筆寬度屬性值，而 3 則不是。有些瀏覽器會自動將 px (像素) 單位指定給數字值，但並非所有瀏覽器都會這麼做：例如，IE 會擲回「無效引數」錯誤！

選取.屬性(名稱, 值)

原始碼 · 有些 HTML 元素有無法使用屬性或樣式來存取的特殊屬性，例如表單欄位的文字 值和核取方塊的 已勾選布林值。使用此方法來取得或設定這些屬性。

selection.property("checked", true)

如果指定了值，則會在選取的元素上將屬性設為指定名稱和值。如果值是常數，則所有元素都會取得相同的屬性值；否則，如果值是函式，則會依序針對每個選取的元素評估該函式，並傳遞目前的資料項 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素 (nodes[i])。然後使用函式的傳回值來設定每個元素的屬性。Null 值會刪除指定的屬性。

selection.property("checked") // true, perhaps

如果未指定值，則會傳回選取中第一個 (非 Null) 元素的指定屬性的值。只有在您知道選取只包含一個元素時，這通常才有用。

選取.text(值)

來源 · 如果指定了值，則會將文字內容設定為所有選取元素上的指定值，並取代任何現有的子元素。

selection.text("Hello, world!")

如果值是常數，則所有元素都會獲得相同的文字內容；否則，如果值是函式，則會依序對每個選取元素進行評估，並傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中this為目前的 DOM 元素 (nodes[i])。然後函式的傳回值會用來設定每個元素的文字內容。空值會清除內容。

selection.text() // "Hello, world!"

如果未指定值，則會傳回選取中第一個 (非空值) 元素的文字內容。這通常只有在您知道選取只包含一個元素時才有用。

選取.html(值)

來源 · 如果指定了值，則會將內部 HTML設定為所有選取元素上的指定值，並取代任何現有的子元素。

selection.html("Hello, <i>world</i>!")

如果值是常數，則所有元素都會獲得相同的內部 HTML；否則，如果值是函式，則會依序對每個選取元素進行評估，並傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中this為目前的 DOM 元素 (nodes[i])。然後函式的傳回值會用來設定每個元素的內部 HTML。空值會清除內容。

selection.html() // "Hello, <i>world</i>!"

如果未指定值，則會傳回選取中第一個 (非空值) 元素的內部 HTML。這通常只有在您知道選取只包含一個元素時才有用。

請改用選取.append或選取.insert來建立資料驅動的內容；此方法適用於您想要一點 HTML 的情況，例如用於豐富格式。此外，選取.html 僅支援 HTML 元素。SVG 元素和其他非 HTML 元素不支援 innerHTML 屬性，因此與選取.html 不相容。請考慮使用XMLSerializer將 DOM 子樹轉換為文字。另請參閱innersvg polyfill，它提供了支援 SVG 元素上 innerHTML 屬性的 shim。

選取.append(類型)

原始碼 · 如果指定的類型為字串，則將此類型 (標籤名稱) 的新元素附加為每個選取元素的最後一個子元素，或如果這是輸入選取，則附加在更新選取中的下一個相鄰元素之前。輸入選取的後續行為允許您以與新繫結資料一致的順序將元素插入 DOM 中；但是，請注意，如果更新元素會變更順序 (即，如果新資料的順序與舊資料不一致)，則可能仍需要選取.order。

如果指定的類型為函式，則會依序為每個選取元素評估函式，並傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (節點)，其中 this 為目前的 DOM 元素 (節點[i])。此函式應傳回要附加的元素。(函式通常會建立新元素，但它也可以傳回現有元素。) 例如，若要將段落附加到每個 DIV 元素

d3.selectAll("div").append("p");

這等同於

d3.selectAll("div").append(() => document.createElement("p"));

這等同於

d3.selectAll("div").select(function() {
  return this.appendChild(document.createElement("p"));
});

在兩種情況下，此方法都會傳回包含附加元素的新選取。每個新元素都會繼承目前元素的資料 (如果有)，方式與選取.select 相同。

指定的名稱可以有命名空間前綴，例如 svg:text，以指定 SVG 命名空間中的 text 屬性。請參閱命名空間以取得支援的命名空間清單；可以透過新增到清單中來註冊其他命名空間。如果未指定命名空間，則會從父元素繼承命名空間；或者，如果名稱是已知的其中一個前綴，則會使用對應的命名空間 (例如，svg 表示 svg:svg)。

選取.insert(類型, 之前)

原始碼 · 如果指定的類型為字串，則會在與指定的之前選取器相符的第一個元素之前插入此類型 (標籤名稱) 的新元素。例如，之前選取器 :first-child 會在第一個子元素之前插入節點。如果未指定之前，則預設為 null。(若要以與繫結資料一致的順序附加元素，請使用選取.append。)

類型和之前都可以指定為函式，這些函式會依序為每個選取元素評估，並傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (節點)，其中 this 為目前的 DOM 元素 (節點[i])。類型函式應傳回要插入的元素；之前函式應傳回元素應在其之前插入的子元素。例如，若要將段落附加到每個 DIV 元素

d3.selectAll("div").insert("p");

這等同於

d3.selectAll("div").insert(() => document.createElement("p"));

這等同於

d3.selectAll("div").select(function() {
  return this.insertBefore(document.createElement("p"), null);
});

在兩種情況下，此方法都會傳回包含附加元素的新選取。每個新元素都會繼承目前元素的資料 (如果有)，方式與選取.select 相同。

選擇.remove()

來源 · 從文件中移除選取的元素。傳回這個選擇（已移除的元素），這些元素現在已從 DOM 中分離。目前沒有專門的 API 將已移除的元素加回到文件中；不過，您可以傳遞一個函式給選擇.append 或選擇.insert 來重新加入元素。

選擇.clone(深度)

來源 · 在選取元素的正後方插入選取元素的複製，並傳回一個新加入複製的新選擇。如果深度為真值，則選取元素的後代節點也會複製。否則，只有元素本身會複製。等同於

selection.select(function() {
  return this.parentNode.insertBefore(this.cloneNode(deep), this.nextSibling);
});

選擇.sort(比較)

來源 · 傳回一個新的選擇，其中包含這個選擇中每個群組的複製，並根據比較函式排序。排序後，重新插入元素以符合結果順序（根據選擇.order）。

比較函式預設為遞增，會傳入兩個元素的資料 a 和 b 進行比較。它應該傳回負值、正值或零值。如果為負值，則 a 應該在 b 之前；如果為正值，則 a 應該在 b 之後；否則，a 和 b 被視為相等，順序則不確定。

選擇.order()

原始碼 · 重新將元素插入文件，使每個群組的文件順序與選取順序相符。如果資料已排序，這等同於呼叫 selection.sort，但速度更快。

selection.raise()

原始碼 · 依序重新插入每個選取的元素，作為其父元素的最後一個子元素。等同於

selection.each(function() {
  this.parentNode.appendChild(this);
});

selection.lower()

原始碼 · 依序重新插入每個選取的元素，作為其父元素的第一個子元素。等同於

selection.each(function() {
  this.parentNode.insertBefore(this, this.parentNode.firstChild);
});

create(name)

原始碼 · 給定指定的元素 name，會傳回一個單一元素選取，其中包含目前文件中的分離元素，其名稱為給定的名稱。此方法假設 HTML 名稱空間，因此在建立 SVG 或其他非 HTML 元素時，您必須明確指定名稱空間；有關支援的名稱空間前綴的詳細資訊，請參閱名稱空間。

d3.create("svg") // equivalent to svg:svg

d3.create("svg:svg") // more explicitly

d3.create("svg:g") // an SVG G element

d3.create("g") // an HTML G (unknown) element

creator(name)

原始碼 · 給定指定的元素 name，會傳回一個函式，用於建立給定名稱的元素，假設 this 是父元素。此方法由 selection.append 和 selection.insert 在內部使用，用於建立新元素。例如，這

selection.append("div");

等同於

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

有關支援的名稱空間前綴的詳細資訊（例如 SVG 元素），請參閱名稱空間。

d3-chord

d3-interpolate

d3-contour

d3-delaunay

d3-force

d3-geo

投影

d3-hierarchy

d3-scale

d3-scale-chromatic

d3-selection

d3-shape

d3-transition

d3-array

修改元素

selection.attr(name, value)

selection.classed(names, value)

selection.style(name, value, priority)

選取.屬性(名稱, 值)

選取.text(值)

選取.html(值)

選取.append(類型)

選取.insert(類型, 之前)

選擇.remove()

選擇.clone(深度)

選擇.sort(比較)

選擇.order()

selection.raise()

selection.lower()

create(name)

creator(name)

投影

修改元素 ​

selection.attr(name, value) ​

selection.classed(names, value) ​

selection.style(name, value, priority) ​

選取.屬性(名稱, 值) ​

選取.text(值) ​

選取.html(值) ​

選取.append(類型) ​

選取.insert(類型, 之前) ​

選擇.remove() ​

選擇.clone(深度) ​

選擇.sort(比較) ​

選擇.order() ​

selection.raise() ​

selection.lower() ​

create(name) ​

creator(name) ​

修改元素

selection.attr(name, value)

selection.classed(names, value)

selection.style(name, value, priority)

選取.屬性(名稱, 值)

選取.text(值)

選取.html(值)

選取.append(類型)

選取.insert(類型, 之前)

選擇.remove()

選擇.clone(深度)

選擇.sort(比較)

選擇.order()

selection.raise()

selection.lower()

create(name)

creator(name)