How can I expand the line where we drag the point?

I have this figure as we see on the picture. How can we

  1. Make the line (where we drag) longer? For example as long as the red line.

  2. We want to have a new output that returns the value in a array (for example the alphabet) in the squarre as shown in the picture, how can I do that? So when we drag for number 2 the letter B should appear in the squarre and if we drag to number 3 the letter C should be in the squarre.

enter image description here

This is my code:

css:

svg {
  display: block;
  margin: auto;
  width: 300px;
  height: 300px;
}

js:

// Just setup, not related to problem.
const svg = d3.select("body")
  .append("svg")
    .attr("width", 500)
    .attr("height", 500);
    
const circle = svg.append("circle")
    .attr("cx", "150")
    .attr("cy", "150")
    .attr("r", "100")
    .attr("fill", "none")
    .attr("stroke", "black");
    
const polygon = svg.append("polygon")
    .attr("fill", "none")
    .attr("stroke", "blue");
    
const circleElement = circle.node();
const ranger = d3.select("#ranger").on("input", update);
const label = d3.select("label");

// This function contains all the relevant logic.
function update() {
  let count = ranger.node().value;
  label.text(count);
  // Calculate step length as circumference / number of points.
  const step = circleElement.getTotalLength() / count; 
  // Build an array of all points on the circle.
  const data = Array.from({length: count}, (_, i) => {
    const point = circleElement.getPointAtLength(i * step);   // Get coordinates of next point.
    return `${point.x},${point.y}`; 
  });
  polygon.attr("points", data.join(" "));
}

update();

and html:

 <center>
 <div class="centered">

Number of side of the polygon.
<script src="https://d3js.org/d3.v5.js"></script>
    <p>
  <input id="ranger" type="range" min="3" max="32" value="5">
  <label for="ranger"></label>
</p>

</div>
</center>
</body>