How to wrap text in circle in d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// Set up the SVG container
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

// Define the radius and center of the circle
var radius = 100;
var centerX = 200;
var centerY = 200;

// Create a circular path using d3.arc()
var arc = d3.arc()
  .innerRadius(radius)
  .outerRadius(radius);

// Create an array of text to display in the circle
var textArray = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5"];

// Add text elements along the circular path
svg.selectAll("text")
  .data(textArray)
  .enter()
  .append("text")
  .attr("transform", function(d, i) {
    var angle = i * (2 * Math.PI / textArray.length);
    return "translate(" + arc.centroid({startAngle: angle, endAngle: angle}) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d;
  });