1

I have one big circle and I have small circles around it as its children now I am facing an issue is their angle rotation I want to rotate the children's circles so that their 90 degrees is towards the center of their parent circle which is (0, 0). how to do that if given the x, y of each child circle. enter image description here

      <>
        {(circles || []).map((circle, idx) => {
          const pathRadius = circle.childrenRadius;

          const pathD = `
            M ${-20},${pathRadius + 5}
            C ${-pathRadius - 50} ${-pathRadius - 28}, ${pathRadius + 50} 
            ${-pathRadius - 28}, ${20} ${pathRadius + 5}`;
          return (
            <g
              onClick={() =>
                setActiveTable({ data: circle, index: idx, type: "round" })
              }
              key={circle.id}
              className={`table round-table table-${idx}`}
              id={idx}
              transform="translate(200, 200)"
            >
              <g className={`round-table-inner table-inner-${idx}`}>
                <circle
                  id={idx}
                  className={`circle circle-${idx}`}
                  r={circle.radius}
                ></circle>
                <TableTitle
                  className={`svg-text round-title-${idx}`}
                  idx={idx}
                  title={circle.title}
                  degrees={-90}
                />
                <ScalePointer
                  className={"arrow"}
                  idx={idx}
                  y={-circle.radius}
                  x={0}
                />
                <RotationPointer
                  className={`rotate-pointer pointer-${idx}`}
                  idx={idx}
                  y={0}
                  x={circle.radius}
                />
                {circle.children.map((childrenCircle, index) => {
                  const numChildren = circle.children.length;
                  const x = (circle.radius + 45) * Math.cos(angle);
                  const y = (circle.radius + 45) * Math.sin(angle);
                  // const personName = "Nathan Drake is the name"; //limit 36
                  // Calculate the path for the circular text
                  const pathId = `path-${idx}-${index}`;
                  const theta = Math.atan2(0 - y, 0 - x);
                  const dx = x - 0;
                  const dy = y - 0;
                  //Person Name alignment
                  if (x < 0) {
                    angle = 270 - (Math.atan(y / -x) * 180) / Math.PI;
                  } else {
                    angle = 90 + (Math.atan(y / x) * 180) / Math.PI;
                  }
                  return (
                    <ChildCircle
                      handleChild={handleChild}
                      x={x}
                      y={-y}
                      index={index}
                      idx={idx}
                      degrees={angle}
                      childrenRadius={circle.childrenRadius}
                      pathD={pathD}
                      pathId={pathId}
                      personName={childrenCircle.title}
                    />
                  );
                })}
              </g>
            </g>
          );
        })}
</>
    </React.Fragment>

And this is the result of the current angle calcuation. enter image description here

Owais Ahmed
  • 61
  • 7
  • 1
    Post the JavaScript you tried and failed as a [mcve] we will fix the code. Or are you just asking for someone else to do all of the work and just give you code? – zer00ne Jun 12 '23 at 19:51
  • 1
    Part of being minimal would be to realize that the big circle and the other circles are extraneous to the problem. The question is improved to ask how to rotate a segment about its center point such that it is collinear with the segment from the origin to the segment's center. That rotation can then be applied to anything on the plane. – danh Jun 12 '23 at 19:58
  • i have updated the code @danh bro please check it out. But since most of its relation was with maths and thats why i didn't upload the code. Sorry for the mistake – Owais Ahmed Jun 12 '23 at 20:39

1 Answers1

0

Hopefully, I solved it using this person's answer and I also give him an upvote. and if modify it a little bit.

if (x < 0) {
   angle = 270 - (Math.atan(y / x) * 180) / Math.PI;
} else {
   angle = 90 + (Math.atan(y / -x) * 180) / Math.PI;
}

solved using this person answer

Owais Ahmed
  • 61
  • 7