selection.insert - 要素を挿入する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのselection.insert()は、指定された位置に要素を挿入するためのAPIです。

サンプルコード

<ul>
	<li>1つ目のLI</li>
	<li>2つ目のLI</li>
	<li>3つ目のLI</li>
	<li>4つ目のLI</li>
	<li>5つ目のLI</li>
</ul>

// ul要素を選択
var selection = d3.select( "ul" ) ;

// 1番最後に新しいli要素を挿入 (第2引数なし)
selection.insert( "li" ) ;

// 4番目のli要素の前に新しいli要素を挿入 (第2引数あり)
selection.insert( "li", ":nth-child(4)" ) ;

// 4番目のli要素の前に新しいli要素を挿入 (第1引数を関数で指定)
selection.insert( function() {
	var liElement = document.createElement( "li" ) ;
	return liElement ;
}, ":nth-child(4)" ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>下のul要素にli要素を挿入していくよ。</p> <ul class="list"> <li>1つ目のLI</li> <li>2つ目のLI</li> <li>3つ目のLI</li> <li>4つ目のLI</li> <li>5つ目のLI</li> </ul> <ul> <li><a id="method1">1番最後に挿入</a></li> <li><a id="method2">4番目の直前に挿入</a></li> <li><a id="method3">リセット</a></li> </ul>

.list { padding: 0 0 0 36px ; list-style-type: disc ; } ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// ul要素を取得 var selection = d3.select( "ul" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // 挿入回数を更新 ++count ; // 1番最後に新しいli要素を挿入 (第2引数なし) selection.insert( "li" ).text( "新しいli要素(" + count + ")" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // 挿入回数を更新 ++count ; // 4番目のli要素の前に新しいli要素を挿入 (第2引数あり) selection.insert( "li", ":nth-child(4)" ).text( "新しいli要素(" + count + ")" ) ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // ul要素を元に戻す selection.html( ulContent ) ; // 挿入回数を元に戻す count = 0 ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = selection.node().innerHTML ; // 挿入回数の記録 var count = 0 ;

構文

selection = selection.insert( string || function [, before] )

引数
項目	説明
string	第1引数に追加したい要素のタグ名を文字列で指定する。指定したタグ名の要素が新しく生成(`createElement`)される。名前空間を指定する場合、`ns:tag`とプレフィクスを付けて指定する。`svg`、`xhtml`、`xlink`、`xml`、`xmlns`に関しては、プレフィクスを指定しなくても認識される。
function	第1引数に関数を指定すると、戻り値を値として指定できる。この関数は、直前で`data()`を利用した場合、第1引数で配列の値、第2引数でインデックス番号を受け取る。関数の戻り値は、タグ名を表す文字列ではなく、要素(ノード)でなければいけない。
before	省略可。省略時は一番最後に挿入される(`append()`と同じ)。第2引数で挿入する位置を指定できる。対象要素の子要素の番号を、CSSの擬似セレクタ(`:first-child`、`:nth-child(4)`など)で指定する。ここで指定した位置の直前に、要素が挿入される。誤って存在しない位置を指定してしまった場合、第2引数を省略した時と同様に一番最後に挿入される。

戻り値
項目	説明
selection	引数を指定してHTMLを変更した場合は、d3.selectionオブジェクトが戻り値となる。

ノート

文字列ならタグ名: 第1引数が文字列なら、そのタグ名を指定する。
関数なら要素: 第1引数が関数なら、戻り値が要素(ノード)になるようにして指定する。
省略したらappend: 第2引数を省略した場合、append()と同じで一番最後に追加される。
間違えたらappend: 無効な位置を指定してしまった場合も、append()と同じで一番最後に追加される。