d3/sunburst.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sunburst Example</title>
    <script src="../lib/d3.v7.min.js"></script>
  </head>
  <body>
    <svg></svg>
  </body>
  <script>
    var vData = {
      id: "TOPICS",
      children: [
        {
          id: "Topic A",
          children: [
            { id: "Sub A1", size: 4 },
            { id: "Sub A2", size: 4 },
          ],
        },
        {
          id: "Topic B",
          children: [
            { id: "Sub B1", size: 3 },
            { id: "Sub B2", size: 3 },
            { id: "Sub B3", size: 3 },
          ],
        },
        {
          id: "Topic C",
          children: [
            { id: "Sub C1", size: 4 },
            { id: "Sub C2", size: 4 },
          ],
        },
      ],
    };

    var vWidth = 300;
    var vHeight = 300;
    var vRadius = Math.min(vWidth, vHeight) / 2;
    var vColor = d3.scaleOrdinal(d3.schemeCategory20b);

    var g = d3
      .select("svg")
      .attr("width", vWidth)
      .attr("height", vHeight)
      .append("g")
      .attr("transform", "translate(" + vWidth / 2 + "," + vHeight / 2 + ")");

    var vLayout = d3.partition().size([2 * Math.PI, vRadius]);

    var vRoot = d3.hierarchy(vData).sum(function (d) {
      return d.size;
    });

    vLayout(vRoot);
    var vArc = d3
      .arc()
      .startAngle(function (d) {
        return d.x0;
      })
      .endAngle(function (d) {
        return d.x1;
      })
      .innerRadius(function (d) {
        return d.y0;
      })
      .outerRadius(function (d) {
        return d.y1;
      });

    /*
    var vNodes = vRoot.descendants();

    var vSlices = g.selectAll('path')
        .data(vNodes)
        .enter()
        .append('path');

    vSlices.filter(function(d) { return d.parent; })
        .attr('d', vArc)
        .style('stoke', '#fff')
        .style('fill', function (d) {
            return vColor((d.children ? d : d.parent).data.id);
        });
*/

    g.selectAll("path")
      .data(vRoot.descendants())
      .enter()
      .append("path")
      .attr("display", function (d) {
        return d.depth ? null : "none";
      })
      .attr("d", arc)
      .style("stroke", "#fff")
      .style("fill", function (d) {
        return color((d.children ? d : d.parent).data.name);
      });
  </script>
</html>