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