D3.jsで円グラフになるボタン作った。

最終更新日

円グラフ祭り!

Pie Chart Btn

example

昨日の棒グラフに続き、ちょっと変わった円グラフを作ってみました。
ボタンをクリックすると円グラフになります。赤いのが出たら当りです。
相変わらず見づらいし使いどころもあまり思い浮かばないのですが、とりあえず面白ければOKということで……。

円グラフのトランジション

参考にさせていただいた、マイクボスック氏のサンプル「The Amazing Pie」のサンプルほぼそのままなので、そちらを見てもらった方が分かりやすいと思います。

SVGフィルター

ボタンの立体感や影などはすべてSVGのフィルター効果によるものです。

以下、各フィルターの簡単に説明。

SVGフィルターの注意点

結構ブラウザ間で差異があって、見え方が違ったり適用されなかったりします。
今回も、当初はSVG要素にフィルターを適用していたのですが、FirefoxやIE10で適用されなかったので(Chromeでは適用される)、SVG要素の直下にg要素を作成しそこにフィルターを適用しています。以下は、ブラウザごとのスクリーンショットです。

・Chrome
svg filter chrome

・Firefox
svg filter firefox

・IE10
svg filter IE10
(Chromeは妙に白みがかっていて、Firefoxはガウスぼかしが効きすぎるかんじです)

また、フィルターを適用した要素をアニメーションさせると結構負荷が高いです。PCではあまり気にならなくてもiPhoneなどで見るとかなり重くなっている場合があるので、「isMobile.js」などを使って、モバイルでの閲覧時にはフィルターを適用しないなどの処理を挟むと良いかもしれません。