D3.js numbers spirally outwards from inner wheel

Question

I worked in the d3 library and created nested wheels. I have no idea how to add texts into the wheel, spirally from inside out. The number starting point doesn't matter, and numbers must spirally outwards according the previous position.

Codes

let allAxis = (data.map(function(i, j) {
    return i.name
  })),
  total = allAxis.length,
  radius = Math.min(options.width / 2, options.height / 2),
  angleSlice = Math.PI * 2 / total,
  Format = d3.format('');

let rScale = d3.scale.linear()
  .domain([0, options.circles.maxValue])
  .range([50, radius]);

let svg = d3.select("body").append("svg")
  .attr("width", options.width + options.margins.left + options.margins.right)
  .attr("height", options.height + options.margins.top + options.margins.bottom);

let g = svg.append("g")
  .attr("transform", "translate(" + (options.width / 2 + options.margins.left) + "," + (options.height / 2 + options.margins.top) + ")");

let axisGrid = g.append("g")
  .attr("class", "axisWraper");

let axis = axisGrid.selectAll(".axis")
  .data(allAxis)
  .enter()
  .append("g")
  .attr("class", "axis")

//append them lines
axis.append("line")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("x2", function(d, i) {
    let tempX2 = radius * Math.cos(angleSlice * i - Math.PI / 2);
    return tempX2;
  })
  .attr("y2", function(d, i) {

    let tempY = radius * Math.sin(angleSlice * i - Math.PI / 2);
    return tempY;
  })
  .attr("class", "line")
  .attr("stroke", "black")
  .attr("fill", "none");

//Draw background circles
axisGrid.selectAll(".levels")
  .data([12,11,10,9,8,7,6, 5, 4, 3, 2, 1])
  .enter()
  .append("circle")
  .attr("class", function(d, i) {
    return `gridCircle-${d}`
  })
  .attr("r", function(d, i) {
    return parseInt(radius / options.circles.levels * d, 10);
  })
  .attr("stroke", "black")
  .attr("fill-opacity", function(d, i) {
    return options.circles.opacity;
  });

axisGrid.select(".gridCircle-1").attr("fill-opacity", 1);
axisGrid.select(".gridCircle-2").attr("fill-opacity", 1);

Expected Result

---

Updated #1 (with PointRadial)

Here's the fiddle: http://jsfiddle.net/arcanabliss/8yjacdoz/73/

Answer 1

You need pointRadial:

Returns the point [x, y] for the given angle in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise, and the given radius.

You can play around with the example below in order to fit to your arrangement e.g. in order to start from 3 o'clock and rotate counter-clockwise etc you just need to play with degrees and radius:

const degrees = (i % numbersPerRing) * (360 / numbersPerRing);
const radius = (Math.floor(i / numbersPerRing) + 1) * ringSize;

// numbers
const numbersPerRing = 8;
const ringSize = 30;
const originX = 120;
const originY = 120;
const numbers = [... new Array(18)].map((d, i) => i + 1);
const diameters = [... new Array(4)].map((d, i) => (i * ringSize) + 10);

const points = numbers.map((n, i) => {
  const degrees = (i % numbersPerRing) * (360 / numbersPerRing);
  const radius = (Math.floor(i / numbersPerRing) + 1) * ringSize;
  const point = d3.pointRadial(degrees * (Math.PI / 180), radius);
  return {
    "value": n,
    "degrees": degrees,
    "point": point
  }
});

// svg
const svg = d3.select("body")
  .append("svg")
  .attr("width", originX * 2)
  .attr("height", originY * 2);  

// circles
svg.selectAll("circles")
  .data(diameters)
  .enter()
  .append("circle")
  .attr("cx", originX)
  .attr("cy", originY)
  .attr("r", d => d)
  .attr("fill", "none")
  .attr("stroke", "#aaaaaa");

// labels
svg.selectAll("labels")
  .data(points)
  .enter()
  .append("text")
  .attr("x", (d, i) => d.point[0])
  .attr("y", (d, i) => d.point[1])
  .attr("transform", `translate(${originX},${originX})`)
  .attr("text-anchor", (d) => (d.degrees > 180) ? "end" : "start")
  .text(d => d.value);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>