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

photo_00131

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

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

まず、HTML部分です。

XHTML

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

JavaScript

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

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

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

という形になります。

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

出力結果

  • Categories

  • タグ

  • アーカイブ

  • 最近の投稿