score:1

Accepted answer

Create arc data records for the angles you want and use the centroid() for these dummy arcs

You have some illegal html after the g element.

// Create an arc generator with configuration
    var arcGenerator = d3.arc()
        .innerRadius(80)
        .outerRadius(100);
        
    var arcData = [
        {startAngle: 0, endAngle: Math.PI * 2 / 4, degree: 0},
        {startAngle: Math.PI * 2 / 4, endAngle: Math.PI, degree: 90},
        {startAngle: Math.PI, endAngle: Math.PI * 3 / 2, degree: 180},
        {startAngle: Math.PI * 3 / 2, endAngle: Math.PI * 2, degree: 270},
    ];

    var rectData = arcData.map(d => { return {startAngle: d.startAngle, endAngle:d.startAngle}; });

    // Create a path element and set its d attribute
    d3.select('g')
        .selectAll('path')
        .data(arcData)
        .enter()
        .append('path')
        .attr('d', arcGenerator);

    // Add labels, using .centroid() to position
    d3.select('g')
        .selectAll('.grect')
        .data(rectData)
        .enter()
        .append('g')
        .attr('class', 'grect')
        .attr('transform', d => {
            var centroid = arcGenerator.centroid(d);
            return `translate(${centroid[0]},${centroid[1]})`;
        })
        .append('rect')
        .attr('x', -5)
        .attr('y', -17)
        .attr('width', 10)
        .attr('height', 35);
path {
	fill: white;
	stroke: black; 
  }
<meta charset="utf-8">
<head>
  <title>Rotate rectangles to arc positions: 0, 90, 180 and 270 </title>
</head>

<body>
  <svg width="700" height="220">
  	 <g transform="translate(200, 110)"></g>
  </svg>

  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
</body>

Edit

You can create the rectData on the fly.

    d3.select('g')
        .selectAll('.grect')
        .data(arcData)
        .enter()
        .append('g')
        .attr('class', 'grect')
        .attr('transform', d => {
            var centroid = arcGenerator.centroid({startAngle: d.startAngle, endAngle:d.startAngle});
            return `translate(${centroid[0]},${centroid[1]})`;
        })
        .append('rect')
        .attr('x', -5)
        .attr('y', -17)
        .attr('width', 10)
        .attr('height', 35);

Related Query

More Query from same tag