Pocket

合計値を円グラフ中央に表示

前回作った円グラフをもう少し改良。まずは円グラフの中央にグラフの合計値を表示させたい。

円グラフの中央をあける

まずは円グラフの中央をあけます。前回デフォルト値で設定していたinnerRadisu(内円)の値をプラグインをコールするときに渡してあげます。

40をセットしたので直径40pxの内円が空きました。これでOK。

円グラフに内円を空けた図

合計値の表示

次にJavaScript側に合計値を表示するtext要素を追加して、中央に配置します。

6行目のd3.sum()メソッドでプラグイン側から渡しているdataの合計値を計算してくれます。便利。あとは、位置の微調整や文字サイズを変更するためにclass属性も設定しています。

text要素の座標は左上になるので、それを中央にするためにCSStext-anchorの値をmiddleに設定してあげます。

円グラフの中央に合計値

円グラフの各要素に値を表示

先程と同じようにtext要素を追加するのですが、円グラフの各要素(path要素)とセットにするためにグループでまとめます。グループ要素はg要素を使用します。

arc.centroid()がポイント。グループ化されたpath要素のtext要素を中央に持っていきたい。そこでpath要素の重心(centroid)をとりそこに配置します。先程の中央にtext要素を置いた時と同じように、CSSで調整を行いたいので、text要素ごとにclass属性を設定します。

円グラフの要素ごとのテキスト表示

できた!\(^o^)/
さて最後はこれにアニメーションを追加しよう。

関連記事

GitHub
※D3-sample/basic_charts/pie_chart/内のファイル