[D3.js] たのしいグラフ描画 - ラベル付きの単純な円グラフ

D3.jsを使って単純な円グラフを描画します。ラベルも付けてみます。

元データ

元データです。
キーと値のハッシュになっています。

testdata = { a: 40, b: 30, c: 20, d: 10 }

できあがりイメージ

大変単純な円グラフができあがりました。
扇型の中心にラベルを付けています。

プログラム

プログラムの一部です。

  // 描画領域
  const svg = d3
    .create('svg')
    .attr('viewBox', [0, 0, width, height])
    .attr('width', width)
    .attr('height', height);
  // グラフを真ん中にするためのエレメント
  const chart = svg
    .append('g')
    .attr("transform", `translate(${width / 2}, ${height / 2})`);

  // 扇型を生成する
  const arc = d3
    .arc()
    .innerRadius(innerRadius)
    .outerRadius(radius);

  // 円グラフを描画する
  chart
    .selectAll(null) // 空のSelection
    .data(testdataReady)
    .enter()
    .append('path')
    .attr('d', arc) // 扇型を描画する
    .attr('fill', datum => colorSeq(datum.index)) // 塗りつぶし
    .attr("stroke", "black")
    .style("stroke-width", "1px");

単純な円グラフ に、下記のようにしてラベルを追加しています。

  // 値ラベルを描画する
  chart
    .selectAll(null)
    .data(testdataReady)
    .enter()
    .append('text')
    .text(datum => datum.data.key) // 表示するテキスト
    .attr("transform", datum => `translate(${arc.centroid(datum)})`) // 扇型の中心に移動
    .style("text-anchor", "middle")
    .style("font-size", 20);

プログラム全体はObservableに置いています。