Make Local Happiness

自分の幸せは自分で作る!!!

D3.jsが4.xになったので、3.xのツリーマップを書き換えてみる

f:id:iwate_takayu:20161004235735p:plain

最近d3.js がver4がリリースされました。 4系になり、モジュール化され各機能が切り分けられました。

多分、データの描画以外のために、機能毎に使えるようになり、 また、拡張がしやすくなったのだと思います。

ただ、、3系との互換性はまったくありません。 Exampleページの多くは3系のままで、 4系のサンプルがまだ少ないため、3系のサンプルを4系に修正していこうと思います。

今回はツリーマップを4系に修正していきます。

完成版はこちらです。

Treemap in v4 - bl.ocks.org

d3.js とは?

Data Driven Documentの頭文字をとってd3です。データに基づいてドキュメントを操作するための JavaScript ライブラリです。 Mike Bostockさんが作ってくれています。

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

4系で何がかわったのか?

d3/CHANGES.md at master · d3/d3 · GitHub

こちらの変更ログをみてもらうとわかるのですが、 かなりの量の変更がありました。

1番大きな変更点としては、 冒頭でも書いたとおり、モジュール化され、D3は1つのライブラリなのですが、 沢山の小さなライブラリーの集合体になりました。

また、メソッド名も短くなり読みやすくなりました。

For example, with v3.x, to specify top orientation and scale for your visualization axis in d3, this was the way to go d3.svg.axis().scale(xscale).orient(“top”). Now, this has been changed to d3.axisTop(xscale)

TreeMapを書き換えてみる

ためしに、こちらのツリーマップを書き換えてみました。 Treemap - bl.ocks.org

私が作ったのはこちらです。 Treemap in v4 - bl.ocks.org

データの作り方が変わっていたり、 callでthisが呼ばれなかったりと、幾つかハマりポイントがありました。

また、ソート順が変わっているのか、 Ver3と全く同じグラフは表示できませんでした。 ここはおいおい、調査していきます。

検索でもどのサンプルが4系なのかわからなかったりするので、 4系だけ集めたリンク集があったらいいですね。