谁能帮助我使用JavaScript处理文本中包含文本的随机不重叠圆？

Question

import React, { Component, Fragment, createRef } from "react";
interface IInterestJson {
  name: string;
  id: string;
  isSelected: boolean;
}

const InterestJson = [
  {
    name: "Gaming",
    id: "gaming",
    isSelected: false
  },
  {
    name: "Books",
    id: "books",
    isSelected: false
  },
  {
    name: "Swimming",
    id: "swimming",
    isSelected: false
  },
  {
    name: "Music",
    id: "music",
    isSelected: false
  },
  {
    name: "Pets",
    id: "pets",
    isSelected: false
  },
  {
    name: "Home & Garden",
    id: "homeGarden",
    isSelected: false
  },
  {
    name: "Fashion",
    id: "fashion",
    isSelected: false
  },
  {
    name: "FootBall",
    id: "football",
    isSelected: false
  },
  {
    name: "Holidays",
    id: "holidays",
    isSelected: false
  },
  {
    name: "Golf",
    id: "golf",
    isSelected: false
  },
  {
    name: "Tennis",
    id: "tennis",
    isSelected: false
  },
  {
    name: "Cycling",
    id: "cycling",
    isSelected: false
  },
  {
    name: "Technology",
    id: "technology",
    isSelected: false
  }
];

let bindCss = classNames.bind(styles);

export interface Props {}
export interface State {
  newCircle?: [];
}

export default class Interest extends Component<Props, State> {
  private textInput: any = createRef<HTMLDivElement>();
  constructor(props: Props) {
    super(props);
    this.state = {
      newCircle: []
    };
  }
  componentDidMount() {
    debugger;
    this.textInput = this.textInput.current;
    this.renderInterest();
  }

  renderInterest = () => {
    let containerWidth = this.textInput ? this.textInput.clientWidth : 0;
    let containerHeight = this.textInput ? this.textInput.clientHeight : 0;
    let addNewCircle: any = [];
    let radius = 80;
    (InterestJson || []).map((data: IInterestJson) => {
      addNewCircle.push(
        <div
          className={styles.circle}
          key={data.id}
          style={{
            width: radius,
            height: radius,
            left: Math.random() * Math.max(containerWidth - radius, 0),
            top: Math.random() * Math.max(containerHeight - radius, 0)
          }}
        >
          {data.name}
        </div>
      );
    });
    this.setState({ newCircle: addNewCircle });
  };

  render() {
    const { newCircle } = this.state;
    return (
      <Fragment>
        <div
          ref={this.textInput}
          className="interestParent"
        >
          {newCircle}
        </div>
      </Fragment>
    );
  }
}

.interestParent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x:auto;
}
.circle {
  position: absolute;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #fff;
  color: red;
  box-shadow: 0px 2px 6px 1px rgba(255, 29, 29, 0.23);
  width: 80px;
  height: 80px;
  margin-left: 8px;
  margin-top: 8px;
  padding: 6px 6px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Can anyone help me with handling random non-overlapping circles with text inside it using javascript?

我想使用javascript创建带有文本的圆形。我正在React＆Typescript项目中创建这个。 我已经检查过了，https://codepen.io/grsmith/pen/zNGPoX，但是，这是在p5.js中，我想在javascript中制作。 我使用CSS类创建了一个圆圈，但是它彼此重叠，因此需要一个解决方案，使圆圈彼此不重叠