D3.jsで要素に文字列を加える方法です。
jQueryを触ったことがある方であれば、セレクタを指定して、appendで要素を加えるなど、似たような書き方が出てきますので、取り組み易いと思います。
まず、HTML部分です。
XHTML
|
0 1 2 |
<div id="sample01"></div> |
div要素を作り、クラス名を sample01 とします。
JavaScript
|
0 1 2 3 4 5 6 |
<script type="text/javascript"> d3.select('#sample01'). append('span'). html('test'); </script> |
appendは指定した要素の子要素末尾にHTML（要素）を追加する関数です。
.でつないでいるのは連続して指示を与える「メソッドチェーン」です。
上記の処理をメソッドチェーンを使わないで書くと
|
0 1 2 3 4 |
var space = d3.select('#sample01'); var span = space.append('span'); span.html('test'); |
という形になります。
メソッドチェーンを使ったほうが簡潔に書くことができるので、D3.jsではメソッドチェーンが多く使われます。
出力結果
|
0 1 2 3 4 |
<div id="sample01"> <span>test</span> </div> |
