如何在多层同心圆中均匀等距定位动态元素？

我已经用CSS实现了多层同心圆，现在需要根据JSON列表动态展示元素，要求元素按「距中心距离+角度（顶部为0°）」的方式均匀等距定位。之前试过Chart.js雷达图，但存在两个问题：无法设置分层颜色，新增元素会改变所有元素的位置。请问有没有可行的实现方案或者更简便的方法？

现有React组件代码 #

import React from 'react'
import styles from './test.module.css'

export default function RadarComponent() {
  return (
    <div className={styles.container}>
        <h1>Radar Cadmus</h1>
        <div className={styles.circleOne}>
            <div className={styles.circleTwo}>
                <div className={styles.circleThree}>
                    <div className={styles.circleFour}>

                    </div>
                </div>
            </div>
        </div>
    </div>
  );
}

对应的CSS样式代码 #

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

.circleOne{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: green;
    width: 700px;
    height: 700px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.circleTwo{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: rgb(128, 255, 0);
    width: 550px;
    height: 550px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.circleThree{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: rgb(242, 255, 0);
    width: 400px;
    height: 400px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.circleFour{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: rgb(255, 153, 0);
    width: 250px;
    height: 250px;
    align-items: center;
    display: flex;
    justify-content: center;
}

尝试过的Chart.js雷达图代码 #

'use client';

import React from 'react';
import { Radar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
);


const data = {
  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: false, // 不填充背景
    borderColor: 'transparent', // 隐藏线条
    pointBackgroundColor: '#415364', // 点的背景色
    pointBorderColor: '#415364',
    pointHoverBackgroundColor: '#415364',
    pointHoverBorderColor: '#fff',
    pointRadius: 5, // 点的大小
  }]
};

const options = {
  elements: {
    line: {
      borderWidth: 3,
    },
  },
  scales: {
    r: {
      backgroundColor: 'rgba(0, 255, 0 , 1)',
      angleLines: {
        display: false, // 隐藏角度线
      },
      grid: {
        circular: true, // 网格线设为圆形
        color: 'rgba(0, 0, 0, 1)',
      },
      ticks: { // 刻度线（同心圆）
        color: 'black',
        count: 5, // 刻度数量
        display: false, // 隐藏刻度标签
      },
      pointLabels: {
        font: {
          size: 12,
          weight: 'bold',
        },
        color: 'black',
      },
    },
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: true,
    },
  },
};

// 获取标记文本的函数
const getMarkerText = (value: number) => {
  if (value >= 75) return '高';
  if (value >= 50) return '中';
  return '低';
};

export default function RadarComponent() {
    
  return (
    <div style={{ width: '600px', height: '600px' }}>
      <Radar options={options} data={data}/>
    </div>
  );
}

方案一：纯React+CSS动态计算定位（推荐） #

利用CSS绝对定位和三角函数计算元素坐标，完全自定义分层颜色与元素位置，不受新增元素影响。

实现逻辑 #

1. 将同心圆容器设为相对定位，作为动态元素的定位基准。
2. 定义JSON数据结构，包含元素的层级（距中心距离）、角度、内容等信息。
3. 通过三角函数计算元素坐标：
   • 角度转弧度：radian = (angle * Math.PI) / 180
   • 水平偏移：x = Math.sin(radian) * 层级半径
   • 垂直偏移：y = -Math.cos(radian) * 层级半径（顶部为0°，取负让元素向上对齐）
4. 元素设为绝对定位，用transform: translate(-50%, -50%)让元素中心对准计算点。

完整代码示例 #

import React from 'react';
import styles from './test.module.css';

// 模拟JSON数据
const elementsData = [
  { level: 1, angle: 0, content: '元素1', color: '#fff' },
  { level: 2, angle: 45, content: '元素2', color: '#000' },
  { level: 3, angle: 90, content: '元素3', color: '#fff' },
  { level: 4, angle: 135, content: '元素4', color: '#000' },
  { level: 1, angle: 180, content: '元素5', color: '#fff' },
];

// 各层级对应的半径（与同心圆尺寸匹配）
const levelRadii = {
  1: 350, // circleOne半径：700/2
  2: 275, // circleTwo半径：550/2
  3: 200, // circleThree半径：400/2
  4: 125, // circleFour半径：250/2
};

export default function RadarComponent() {
  return (
    <div className={styles.container}>
      <h1>Radar Cadmus</h1>
      {/* 外层容器设为相对定位 */}
      <div className={styles.radarWrapper}>
        {/* 原有同心圆 */}
        <div className={styles.circleOne}>
          <div className={styles.circleTwo}>
            <div className={styles.circleThree}>
              <div className={styles.circleFour}></div>
            </div>
          </div>
        </div>
        {/* 动态渲染元素 */}
        {elementsData.map((item, index) => {
          const radius = levelRadii[item.level];
          const radian = (item.angle * Math.PI) / 180;
          const x = Math.sin(radian) * radius;
          const y = -Math.cos(radian) * radius;

          return (
            <div
              key={index}
              className={styles.radarElement}
              style={{
                left: `50%`,
                top: `50%`,
                transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`,
                color: item.color,
              }}
            >
              {item.content}
            </div>
          );
        })}
      </div>
    </div>
  );
}

新增CSS样式：

.radarWrapper {
  position: relative;
}

.radarElement {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #415364;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

优势 #

• 完全自定义：分层颜色由原有CSS控制，元素位置严格按定义的角度和层级定位，新增元素不影响其他元素。
• 性能优异：纯CSS+React计算，无第三方库依赖。
• 灵活度高：可随时修改元素样式、层级、角度，支持添加交互效果。

方案二：使用SVG实现 #

SVG天生适合绘制圆形与定位元素，通过<circle>绘制同心圆，<text>或<g>标签定位动态元素。

实现逻辑 #

1. 创建SVG画布，设置viewBox保证缩放不失真。
2. 用<circle>绘制多层同心圆，自定义每个圆的颜色与半径。
3. 遍历JSON数据，通过transform="rotate(angle, cx, cy) translate(0, -radius)"定位元素（SVG默认顺时针旋转，顶部为0°需调整偏移方向）。

代码示例 #

import React from 'react';

const elementsData = [
  { level: 1, angle: 0, content: '元素1' },
  { level: 2, angle: 45, content: '元素2' },
  { level: 3, angle: 90, content: '元素3' },
];

// 同心圆配置
const circles = [
  { radius: 350, color: 'green' },
  { radius: 275, color: 'rgb(128, 255, 0)' },
  { radius: 200, color: 'rgb(242, 255, 0)' },
  { radius: 125, color: 'rgb(255, 153, 0)' },
];

const centerX = 350;
const centerY = 350;

export default function RadarComponent() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h1>Radar Cadmus</h1>
      <svg width="700" height="700" viewBox="0 0 700 700">
        {/* 绘制同心圆 */}
        {circles.map((circle, index) => (
          <circle
            key={index}
            cx={centerX}
            cy={centerY}
            r={circle.radius}
            fill={circle.color}
          />
        ))}
        {/* 绘制动态元素 */}
        {elementsData.map((item, index) => {
          const radius = circles[item.level - 1].radius;
          return (
            <text
              key={index}
              x={centerX}
              y={centerY}
              transform={`rotate(${item.angle}, ${centerX}, ${centerY}) translate(0, -${radius})`}
              textAnchor="middle"
              dominantBaseline="middle"
              fill="#fff"
              fontWeight="bold"
            >
              {item.content}
            </text>
          );
        })}
      </svg>
    </div>
  );
}

优势 #

• 矢量图形，缩放不失真。
• 代码简洁，无需复杂三角函数计算，直接用SVG的transform属性定位。
• 适合复杂图形或动画场景。

为什么放弃Chart.js？ #

Chart.js雷达图核心是展示数据相对比例，新增数据点会自动重新分配角度，无法固定元素位置；同时分层颜色自定义受限，网格线为统一配置，难以实现多层不同颜色的同心圆。上述两种方案完全围绕需求定制，无此类限制。

内容的提问来源于stack exchange，提问作者Fábio Seyiji