本文介绍纯 html/css 实现径向汇聚图的方法：以中心圆为“home”，周围 n 个等距排列的圆形节点通过直线连接至中心，无需第三方库，兼容 angular 组件化开发。
要构建一个径向汇聚式图表（Radial Converging Diagram），核心在于：
- 一个固定居中的中心节点（如“Home”）；
- 若干外围节点（2–10 个），均匀分布在以中心为圆心的假想圆周上；
- 每个外围节点通过一条直线精准指向中心节点。
在不引入 D3、Chart.js 或 SVG 绘图库的前提下，纯 CSS 可高效实现该布局——关键在于利用 transform: rotate 配合 transform-origin，让每个“连接臂”（含末端节点）绕中心底部旋转指定角度，从而自然形成放射状结构。
✅ 推荐实现方案：CSS 旋转臂 + 居中定位
以下是一个可直接复用的响应式、参数化 CSS 示例（支持动态节点数）：
? 在 Angular 中的集成建议
由于你使用 Angular 且暂不引入外部库，推荐将该结构封装为独立组件：
- 创建 RadialDiagramComponent，接收 @Input() nodeCount: number = 6 和 @Input() nodes: RadialNode[]（含颜色、标签、点击事件等元数据）；
- 使用 *ngFor 渲染 .radial-arm 元素，并通过 [style.--angle] 动态绑定旋转角度（避免硬编码 nth-child）；
- 节点样式（如背景色）可通过 [ngStyle] 或 CSS 自定义属性（--node-color）灵活控制；
- 线条与节点分离设计，便于后续扩展交互逻辑（例如点击某节点时高亮对应连线、触发路由跳转等）。
⚠️ 注意事项
- 响应式适配：vmin 单位确保在任意屏幕下保持正圆比例；若需固定像素尺寸，请替换为 px 并调整 --radius 计算逻辑。
- Z-index 层级：确保 .radial-center 的 z-index 高于所有 .radial-arm，避免连线遮挡中心。
- 性能提示：纯 CSS 方案无 JS 渲染开销，适合静态或低频更新场景；如需动画（如节点入场动效），可添加 transition: transform 0.4s ease-out 到 .radial-arm。
- 无障碍补充：为 .radial-node 添加 aria-label（如 "Navigation to Dashboard"）并配合 role="button"，提升可访问性。
该方案轻量、可维护、风格可控，完美契合 Angular 工程化需求，同时为未来接入 SVG 或 Canvas 扩展预留了清晰接口边界。
