[D3.js] 要素を加え文字列を表示させる方法

D3.jsで要素に文字列を加える方法です。

jQueryを触ったことがある方であれば、セレクタを指定して、appendで要素を加えるなど、似たような書き方が出てきますので、取り組み易いと思います。

まず、HTML部分です。

XHTML

<div id="sample01"></div>

1	<div id="sample01"></div>

div要素を作り、クラス名を sample01 とします。

JavaScript

<script type="text/javascript">
d3.select('#sample01').
append('span').
html('test');
</script>

d3.select('#sample01').

append('span').

html('test');

</script>

appendは指定した要素の子要素末尾にHTML（要素）を追加する関数です。

.でつないでいるのは連続して指示を与える「メソッドチェーン」です。

上記の処理をメソッドチェーンを使わないで書くと

 var space = d3.select('#sample01');
var span = space.append('span');
span.html('test');

var space = d3.select('#sample01');

var span = space.append('span');

span.html('test');

という形になります。

メソッドチェーンを使ったほうが簡潔に書くことができるので、D3.jsではメソッドチェーンが多く使われます。

出力結果

<div id="sample01">
<span>test</span>
</div>

</div>

SearchLight