[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(0)
    .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");

全体はObservableに置いています。