【d3.js】円グラフにラベルを追加する方法

d3.js(v5)を使った円グラフにラベルを追加する方法をご紹介します。

下記の円グラフを描く方法、グラフにラベルを追加する記事を参考にしていきます。

HTML/JavaScriptサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Pie Chart</title>
<script src="d3.min.js"></script>
<style>

h1{
  font-size: small;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

svg{
  font: 12px sans-serif;
  background-color: #eee;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: #333;
}
</style>
</head>

<body>
<h1>2022年国内IoT市場規模予測:約11.7兆円</h1>
<script>
  // 1. データの準備
  var dataset = [
    { "name": "サービス", "value": 33.7},
    { "name": "ソフトウェア", "value": 22.7 },
    { "name": "コネクティビティ", "value": 9.7 },
    { "name": "ハードウェア", "value": 29.2 }
  ]

  var width = 600; // グラフの幅
  var height = 400; // グラフの高さ
  var radius = Math.min(width, height) / 2 - 10; // 円の半径

  // SVG設定
  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

  g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  // カラー設定
  var color = d3.scaleOrdinal()
    .range(["#A4243B", "#D8C99B", "#D8973C", "#BD632F", "#273E47"]);

  // 円グラフ関数
  var pie = d3.pie()
    .value(function(d) { return d.value; })
    .sort(null);

  // 円グラフへのデータ設定
  var pieChart = g.selectAll(".pie")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "pie");

  arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(0);

  pieChart.append("path")
    .attr("d", arc)
    .attr("fill", function(d) { return color(d.index) })
    .attr("opacity", 0.8)

  // 円グラフにテキスト追加
  var text = d3.arc()
    .outerRadius(radius - 60)
    .innerRadius(radius - 60);

  pieChart.append("text")
    .attr("fill", "black")
    .attr("transform", function(d) { return "translate(" + text.centroid(d) + ")"; })
    .attr("dy", "5px")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.data.name; });
  </script>
</body>

</html>

円グラフにラベルを追加

円グラフ上に表示するラベルの表示位置を計算します。

// 円グラフにデータを設定
  var pieChart = g.selectAll(".pie")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "pie");

// 各データの角度を計算
  arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(0);

// Path要素の追加
  pieChart.append("path")
    .attr("d", arc)
    .attr("fill", function(d) { return color(d.index) })
    .attr("opacity", 0.8)

  // 円グラフにテキスト追加
  var text = d3.arc()
    .outerRadius(radius - 60)
    .innerRadius(radius - 60);
innerRadius()内側の半径
outerRadius()外側の半径
startAngle()アークが始まる角度
endAngle()アークが終わる角度

角度はラジアン

ラジアンとは「円(扇形)の孤の長さ(L)÷円の半径(r)」によって求められる値

180度3.14 =π
360度6.28 =π*2

例えば、内側の半径 innerRadius() を設定するとこのような円グラフになります。

  arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(radius - 50);

まとめ

d3.jsで円グラフにラベルを追加する方法でした。

関連情報

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA