d3.js Advent Calendar 2014の20日目です。（だいぶ遅くなってすみません、Better late than neverということで‥）
少し前に D3.js v3.5がリリースされましたね。いくつかの新featureがありましたが、個人的にはarcで角丸が出来るようになったのが目を引きました。D3.jsは基本的にプリミティブな形を使ってビジュアライズしますが、そうするとどうしても「D3.js」感が強すぎてしまい、個性を出すのが難しいこともあります。そういった意味でこういった細かい見た目が調節できるようになるというのはうれしい機能です。
実装的には
arcのgemeratorを作るときに以下のように
var arc = d3.svg.arc()
.cornerRadius(20)
.innerRadius(100)
.outerRadius(120);
cornerRadiusという関数を呼ぶだけです。
どういったものかはオフィシャルのデモ見たいただければ一目瞭然です。
Arc Corners
Arc Corners II
今回はこのcornerRadiusを使って、Apple Watch的UIをd3.jsで作ってみたいと思います。
これはarcの角丸が指定できることで表現しやすくなったデザインだと思います。
1.まずは早速cornerRadiusを使って、サークル状のarcを作ります。
2.次は背景をつけます。だいぶそれっぽくなって来ましたね。
3.ただ、角丸にすることで開始点は0にも関わらず、少し進んで（ずれて）見えてしまいますね。ちょっといけてないので、角丸の分だけ前後に開始点、終点をずらします。
これでたいぶ自然に見えるようになったのではないでしょうか？
4.次にアニメーションとアイコンをつけて完成です。
実際のiWatchのデモはもっと細かいアニメーションしてますが、ひとまずそれっぽいものはできたと思います。
iconのパスデータはIllustratorでつくってsvgで出力して作ってます。
このようにcornerRadiusを使うことで表現に幅が出来、いままでとは違ったデザインが出来るようになります、ぜひどんどん使っていきましょう。
Enjoy cornerRadius and Have a Happy holiday!
