要素の変更

要素を選択した後、その選択を使用して要素を変更します。たとえば、現在のドキュメント内のすべての段落要素のクラスと色のスタイルを設定するには、次のようにします。

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*]）になります。関数の戻り値は、各要素の属性を設定するために使用されます。 null値は、指定された属性を削除します。

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

*value* が指定されていない場合、選択内の最初の（null以外の）要素の指定された属性の現在の値を返します。これは一般に、選択に要素が1つだけ含まれていることがわかっている場合にのみ役立ちます。

指定された *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* が指定されていない場合、最初の（null以外の）選択された要素に指定された *classes* がある場合にのみtrueを返します。これは一般に、選択に要素が1つだけ含まれていることがわかっている場合にのみ役立ちます。

selection.style(name, value, priority)

ソース · *value* が指定されている場合、選択された要素の指定された *name* のスタイルプロパティを指定された値に設定し、この選択を返します。

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

*value* が定数の場合、すべての要素に同じスタイルプロパティ値が指定されます。そうでない場合、*value* が関数の場合、選択された各要素に対して順番に評価され、現在のデータ（*d*）、現在のインデックス（*i*）、および現在のグループ（*nodes*）が渡され、*this* は現在のDOM要素（*nodes*[ *i*]）になります。関数の戻り値は、各要素のスタイルプロパティを設定するために使用されます。 null値は、スタイルプロパティを削除します。オプションの *priority* をnullまたは文字列 `important`（感嘆符なし）として指定することもできます。

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

*value* が指定されていない場合、選択内の最初の（null以外の）要素の指定されたスタイルプロパティの現在の値を返します。現在の値は、要素のインライン値が存在する場合はその値として定義され、そうでない場合は計算値として定義されます。現在のスタイル値にアクセスすることは、一般に、選択に要素が1つだけ含まれていることがわかっている場合にのみ役立ちます。

注意

多くのSVG属性とは異なり、CSSスタイルには通常、関連付けられた単位があります。たとえば、`3px` は有効な stroke-width プロパティ値ですが、`3` は有効ではありません。一部のブラウザは数値に `px`（ピクセル）単位を暗黙的に割り当てますが、すべてのブラウザがそうするわけではありません。たとえば、IEは「無効な引数」エラーをスローします！

selection.property(name, value)

ソース · 一部のHTML要素には、フォームフィールドのテキスト`value` やチェックボックスの `checked` ブール値など、属性やスタイルを使用してアドレス指定できない特別なプロパティがあります。これらのプロパティを取得または設定するには、このメソッドを使用します。

selection.property("checked", true)

*value* が指定されている場合、選択された要素の指定された *name* のプロパティを指定された値に設定します。 *value* が定数の場合、すべての要素に同じプロパティ値が指定されます。そうでない場合、*value* が関数の場合、選択された各要素に対して順番に評価され、現在のデータ（*d*）、現在のインデックス（*i*）、および現在のグループ（*nodes*）が渡され、 *this* は現在のDOM要素（*nodes*[ *i*]）になります。関数の戻り値は、各要素のプロパティを設定するために使用されます。 null値は、指定されたプロパティを削除します。

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

*value* が指定されていない場合、選択内の最初の（null以外の）要素の指定されたプロパティの値を返します。これは一般に、選択に要素が1つだけ含まれていることがわかっている場合にのみ役立ちます。

selection.text(value)

ソース · *value* が指定されている場合、すべての選択された要素のテキストコンテンツを指定された値に設定し、既存の子要素を置き換えます。

selection.text("Hello, world!")

*value* が定数の場合、すべての要素に同じテキストコンテンツが指定されます。そうでない場合、*value* が関数の場合、選択された各要素に対して順番に評価され、現在のデータ（*d*）、現在のインデックス（*i*）、および現在のグループ（*nodes*）が渡され、 *this* は現在のDOM要素（*nodes*[ *i*]）になります。関数の戻り値は、各要素のテキストコンテンツを設定するために使用されます。 null値は、コンテンツをクリアします。

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

*value* が指定されていない場合、選択内の最初の（null以外の）要素のテキストコンテンツを返します。これは一般に、選択に要素が1つだけ含まれていることがわかっている場合にのみ役立ちます。

selection.html(value)

ソース · *value* が指定されている場合、すべての選択された要素の内部HTMLを指定された値に設定し、既存の子要素を置き換えます。

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

*value* が定数の場合、すべての要素に同じ内部HTMLが指定されます。そうでない場合、*value* が関数の場合、選択された各要素に対して順番に評価され、現在のデータ（*d*）、現在のインデックス（*i*）、および現在のグループ（*nodes*）が渡され、 *this* は現在のDOM要素（*nodes*[ *i*]）になります。関数の戻り値は、各要素の内部HTMLを設定するために使用されます。 null値は、コンテンツをクリアします。

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

値が指定されていない場合、選択範囲内の最初の（null以外の）要素の内部HTMLを返します。これは、選択範囲に要素が1つだけ含まれていることがわかっている場合にのみ一般的に役立ちます。

データ駆動型コンテンツを作成するには、代わりにselection.appendまたはselection.insertを使用してください。このメソッドは、リッチフォーマットなどに少量のHTMLが必要な場合を想定しています。また、selection.htmlはHTML要素でのみサポートされています。SVG要素やその他の非HTML要素はinnerHTMLプロパティをサポートしていないため、selection.htmlと互換性がありません。DOMサブツリーをテキストに変換するには、XMLSerializerの使用を検討してください。SVG要素でinnerHTMLプロパティをサポートするためのshimを提供するinnersvgポリフィルも参照してください。

selection.append(type)

ソース · 指定されたtypeが文字列の場合、このタイプの新しい要素（タグ名）を、選択された各要素の最後の子として、またはこれがenter selectionの場合は、更新選択の次の兄弟の前に追加します。enter selectionのこの後者の動作により、新しいバインドされたデータと一致する順序でDOMに要素を挿入できます。ただし、要素の更新順序が変更される場合（つまり、新しいデータの順序が古いデータと一致しない場合）、selection.orderが依然として必要な場合があります。

指定されたtypeが関数の場合、選択された各要素に対して順番に評価され、現在のデータ（d）、現在のインデックス（i）、および現在のグループ（nodes）が渡され、thisは現在のDOM要素（nodes[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"));
});

どちらの場合も、このメソッドは追加された要素を含む新しい選択範囲を返します。各新しい要素は、selection.selectと同じ方法で、現在の要素のデータ（存在する場合）を継承します。

指定されたnameには、SVG名前空間のtext属性を指定するためのsvg:textなどの名前空間プレフィックスが付いている場合があります。サポートされている名前空間のマップについては、名前空間を参照してください。マップに追加することで、追加の名前空間を登録できます。名前空間が指定されていない場合、名前空間は親要素から継承されます。または、名前が既知のプレフィックスの1つである場合、対応する名前空間が使用されます（たとえば、svgはsvg:svgを意味します）。

selection.insert(type, before)

ソース · 指定されたtypeが文字列の場合、このタイプの新しい要素（タグ名）を、選択された各要素の指定されたbeforeセレクターに一致する最初の要素の前に挿入します。たとえば、beforeセレクター:first-childは、最初の子の前にノードを挿入します。beforeが指定されていない場合、デフォルトはnullです。（バインドされたデータと一致する順序で要素を追加するには、selection.appendを使用します。）

typeとbeforeはどちらも、選択された各要素に対して順番に評価される関数として指定できます。現在のデータ（d）、現在のインデックス（i）、および現在のグループ（nodes）が渡され、thisは現在のDOM要素（nodes[i]）になります。type関数は挿入される要素を返す必要があります。before関数は、要素が挿入される前の子要素を返す必要があります。たとえば、各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);
});

selection.remove()

ソース · 選択した要素をドキュメントから削除します。この選択範囲（削除された要素）を返します。これは、DOMから切り離されています。削除された要素をドキュメントに 다시 추가するための専用のAPIは現在ありません。ただし、selection.appendまたはselection.insertに関数を渡して、要素を再び追加できます。

selection.clone(deep)

ソース · 選択した要素のクローンを、選択した要素の直後に挿入し、新しく追加されたクローンの選択範囲を返します。deepがtruthyの場合、選択した要素の子孫ノードも複製されます。それ以外の場合、要素自体のみが複製されます。次と同等です

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

selection.sort(compare)

ソース · この選択範囲の各グループのコピーを、compare関数に従ってソートした新しい選択範囲を返します。ソート後、結果の順序に合わせて要素を再挿入します（selection.orderによる）。

比較関数は、デフォルトでascendingに設定されており、比較するために2つの要素のデータaとbが渡されます。負、正、またはゼロの値を返す必要があります。負の場合、aはbの前にする必要があります。正の場合、aはbの後にある必要があります。それ以外の場合、aとbは等しいと見なされ、順序は任意です。

selection.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)

selection.property(name, value)

selection.text(value)

selection.html(value)

selection.append(type)

selection.insert(type, before)

selection.remove()

selection.clone(deep)

selection.sort(compare)

selection.order()

selection.raise()

selection.lower()

create(name)

creator(name)

投影法

要素の変更 ​

selection.attr(name, value) ​

selection.classed(names, value) ​

selection.style(name, value, priority) ​

selection.property(name, value) ​

selection.text(value) ​

selection.html(value) ​

selection.append(type) ​

selection.insert(type, before) ​

selection.remove() ​

selection.clone(deep) ​

selection.sort(compare) ​

selection.order() ​

selection.raise() ​

selection.lower() ​

create(name) ​

creator(name) ​

要素の変更

selection.attr(name, value)

selection.classed(names, value)

selection.style(name, value, priority)

selection.property(name, value)

selection.text(value)

selection.html(value)

selection.append(type)

selection.insert(type, before)

selection.remove()

selection.clone(deep)

selection.sort(compare)

selection.order()

selection.raise()

selection.lower()

create(name)

creator(name)