スポンサーリンク
スポンサーリンク

円グラフに数値とテキストを加えてみる

円グラフの中央にテキストを表示する

円グラフの中に文字を表示してみます。円グラフ中央に合計値を表示します。D3.jsでは便利な機能があります。配列内の合計値を取得するには、d3.sum()メソッドを使います。パラメーターに配列を指定すると合計値を返却します。

円グラフの中央に文字を表示するにはappend(“text”)としてtext要素を追加します。今回は、データセットに応じて要素を追加はしないので、enter(),data()メソッドはいらないです。

各扇の部分の値も表示する

合計値の表示方法が分かったので、次は各扇の部分の値も表示したいです。推知のスタイルは合計値と同じようにHTMLファイル内で設定します。こちらも
D3.jsには便利な機能が用意されています。結論を先に言うと、centroid()メソッドを使います。このメソッドは図形の座標値から中心(重心)を計算します。扇の型のとき。その中心座標を求めることができます。centroid()メソッドは複雑な図形にも対応していますので、円グラフ以外にも利用することができます。

.attr(“transform”, function(d,i){
return “translate(“+ arc.centroid(d) + “)”;
})

centroid()メソッドはパラメーターには、データのそのものではなく円グラフ・扇形に関する情報とデータを持ったオブジェクトを渡さなければなりません。ただ。、オブジェクトに格納する情報は自分で用意する必要はなく、扇形のSVG要素のg要素を使ってグループ化するだけでD3.js側が勝手に計算します。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました