d3 5 - Appending circles about a semi-circle or arc-CodePudding

Suppose we wanted to make a list-like visual. Setting the y logic for the circles can be as simple as:

var data = [0,1,2,3,4,5,6,7,8,9];

var yScale = d3.scaleLinear()
    .range([height,0])
    .domain([0,9]);

svg.selectAll(null)
    .data(data)
    .enter()
    .append('circle')
    .attr('cy', function(d) { return yScale(d) })
    .attr('cx', 100)
    .attr('r', 10)
    .style('fill', "#a6a6a6");

However, suppose we wanted to go for some style points and arrange the circles not in a blocky / tabular arrangement but rather arrange them about a circle or arc. I had this result in mind (only concerned with the outer circles):

While I think d3 does have trigonometric functions, I have never seen them used in pixel coordinates. I'd imagine the pseudo-code to be something like:

var semiCircleScale = d3.?????
    .range([250 degrees, 110 degrees])
    .domain([0,9]);

svg.selectAll(null)
    .data(data)
    .enter()
    .append('circle')
    .attr('cy', function(d) { return semiCircleScale(d) })
    .attr('cx', 100)
    .attr('r', 10)
    .style('fill', "#a6a6a6");

Question

Is anyone familiar with using circle / arc scales for use with x,y logic for appending shapes? Or is there an easier/less-math-intensive way?

CodePudding user response：

So the idea is to create 2 different path of arc and then calculate the circumference and place the circles along with.

d3.svg.arc()
.append("path")
.attr("d", arc1)

Here is a fiddle link with minimum code to establish the idea https://jsfiddle.net/Dibyanshu/g03p6sxj/