Как создать круги на орбите кольца x9? Javascript?

Question

Это то, что я имею до сих пор:

petsJ = d3.select('.semi-circle-1')
petOwnersJ = d3.select('.semi-circle-2')
circle = d3.select('.circle')


/* Top semi-circle - mouse over*/

petsJ.on("mouseover", function(d){
    d3.select(this)
    .transition().duration(300)
    .style("box-shadow", "0 0 40px gold")
});

petsJ.on("mouseout", function(d){
    d3.select(this)
    .transition().duration(300)
    .style("box-shadow", "none")
});

/* Top semi-circle - click*/

petsJ.on("click", function(d){
    d3.select(this)
    .transition().duration(100)
    .style("background-color", "blue")
    .style('width', '16vw')
    .style('height', '8vw')
    .style('align-items', 'center')
    petOwnersJ
    .style('width', '16vw')
    .style('height', '8vw')
    d3.select('.circle')
    .style('margin-top', '15vh')

});




/* Bottom semi-circle */
petOwnersJ.on("mouseover", function(d){
    d3.select(this)
    .transition().duration(300)
    .style("box-shadow", "0 0 40px gold");
});

petOwnersJ.on("mouseout", function(d){
    d3.select(this)
    .transition().duration(300)
        .style("box-shadow", "none");
});

/* Bottom semi-circle click */

petOwnersJ.on("click", function(d){
    d3.select(this)
    .transition().duration(250)
    .style("background-color", "blue")
    .style('width', '16vw')
    .style('height', '8vw')
    .style('align-items', 'center')
    petsJ            
    .style('width', '16vw')
    .style('height', '8vw')
    d3.select('.circle')
    .style('margin-top', '15vh')
});

.jonsIdea {
    height: 80vh;
    align-items: center;
}

.circle {
    width: 20vw;
    height: 20vw;
    background: white;
    border-radius: 50%;
    margin: auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.semi-circle-1 {
    height: 10vw;
    width: 20vw;
    border-radius: 10vw 10vw 0 0;
    background-color: rgba(100, 200 ,200, 0.3);
    z-index: 2;
    border: red 2px solid;
    position: inherit;
    display: inherit;
    max-width: 20vw;
    max-height: 10vw;
}

.semi-circle-2 {
    height: 10vw;
    width: 20vw;
    border-radius: 10vw 10vw 0 0;
    background-color: rgba(200, 200 ,200, 0.3);
    z-index: 2;
    transform: rotate(180deg);
    border: red 2px solid;
    position: inherit;
    display: inherit;
    max-width: 20vw;
    max-height: 10vw;
}

#pets-J {
   text-align: center;
   margin: auto;
}

#pet-owners-J {
    text-align: center;
    transform: rotate(180deg);
    margin: auto;
}

.orbit {
    width: 30vw;
    height: 30vw;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    animation: rotate1 3s linear infinite;
}

.banfield {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background-color: red;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://d3js.org/d3.v5.js"></script>
<div class="jonsIdea">
        <h1>Please select your businesses</h1>
        <g>
            <div class="circle">
                <div class="semi-circle-1">
                    <section id='pets-J'>
                        <p>x</p>
                        
                    </section>

                </div>
                <div class="semi-circle-2">
                    <section id='pet-owners-J'>
                        <p>y</p>
                       
                    </section>
                </div>
                <div class="orbit">
                    <div class="1"></div>
                    <div class="2"></div>
                    <div class="3"></div>
                    <div class="4"></div>
                    <div class="5"></div>
                    <div class="6"></div>
                    <div class="7"></div>
                    <div class="8"></div>
                    <div class="9"></div>
            </div>
            </div>
        </g>

    </div>

Чего я хочу добиться, так это на черном кольце, мне бы хотелось, чтобы 9 кругов, к которым я мог бы добавить png / svgs, одинаково пространства, и может быть увеличено.

Я видел решения с четными числами, подобные этому: http://jsfiddle.net/yxVkk/, но я не могу понять, как разделить круг на 9 и легко расположить его вокруг без угла.

Я также нашел этот идеальный вариант: Как создать круги вокруг круга с css, javascript? , но мои навыки кодирования недостаточно сильны, чтобы справиться с этим в одиночку , Последние 2 часа я пытался заставить это работать.

Может кто-нибудь помочь мне создать какой-нибудь JS, который будет составлять кольцо кругов на основе кольца орбиты?

Большое спасибо

Answer 1

var div = 360 / 9; (this gets the circles)
var radius = 300; (this gets the distance)
var parentdiv = document.getElementById('orbit'); (this gets the parent)
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter; (this calculates offset)
for (var i = 1; i <= 9; ++i) {
  var childdiv = document.createElement('div'); (for each make 1)
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  parentdiv.appendChild(childdiv);
}

: D