selection.append - 要素を追加する

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

d3.jsのselection.append()は、要素を追加するためのAPIです。

サンプルコード

<div></div>

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

// div要素に新しくinput要素を追加 (タグ名で指定)
selection.append( "input" ) ;

// div要素に新しくinput要素を追加 (関数で指定)
selection.append( function() {
	var inputElement = document.createElement( "input" ) ;
	return inputElement ;
} ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>下のdiv要素にinput要素を追加していくよ。</p> <div></div> <ul> <li><a id="method1">追加</a></li> <li><a id="method2">リセット</a></li> </ul>

div { background: #f2f2f2 ; min-height: 92px ; padding: 2px ; } input { font-size: 16px ; height: 40px ; transition: width .3s ; box-sizing: border-box ; width: 100% ; margin: 2px 0 ; } 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 ; }

// p要素を取得 var selection = d3.select( "div" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // div要素にinput要素を追加する selection.append( "input" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // div要素を空に selection.html( "" ) ; }

構文

selection = selection.append( string || function )

引数
項目	説明
string	追加したい要素のタグ名を文字列で指定する。指定したタグ名の要素が新しく生成(`createElement`)される。名前空間を指定する場合、`ns:tag`とプレフィクスを付けて指定する。`svg`、`xhtml`、`xlink`、`xml`、`xmlns`に関しては、プレフィクスを指定しなくても認識される。
function	関数を指定すると、戻り値を値として指定できる。この関数は、直前で`data()`を利用した場合、第1引数で配列の値、第2引数でインデックス番号を受け取る。関数の戻り値は、タグ名を表す文字列ではなく、要素(ノード)でなければいけない。

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

ノート

文字列ならタグ名: 引数が文字列なら、そのタグ名を指定する。
関数なら要素: 引数が関数なら、戻り値が要素(ノード)になるようにして指定する。関数でタグ名(string)を戻り値にした場合、エラーが発生する。
prepend()はどうやる？: 追加ではなく、前に挿入したい場合はinsert()を利用する。