如何使用动态无线电创建 d3 径向答案

【问题标题】：how to create d3 radial with dynamic radios如何使用动态无线电创建 d3 径向
【发布时间】：2021-09-13 22:54:43
【问题描述】：

我创建了一个带有两层选项的径向。我这样做的方式不是真正动态的，也不是真正响应屏幕尺寸。我现在需要它是这两件事。这是我设计的屏幕尺寸时的样子。

我在沙盒上创建了一个工作演示，其中设置了我需要如何使用它的尺寸。这就是它的样子。

这里是链接WORKING DEMO

感谢任何帮助。还要记住，外层可以有更少或更多的选择。如果蓝色切换按钮总是在径向底部对齐，就像在能量损失的恩下方一样，那就太好了

【问题讨论】：

标签： javascript reactjs svg d3.js geometry

【解决方案1】：

我会考虑使用SVG ViewBox 以保持一致性。这基本上是创建一个一致的可扩展 SVG，将其容器的大小和坐标映射到 SVG 内的一致范围。

例如：

<div height="400px" width="400px">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" stroke="red" fill-opacity="0"/>
    <circle r="4" cx="10" cy="10"/>
  </svg>
</div>

所以它基本上创建了一个从 div 的 400x400 尺寸到 svg 的 100x100 的映射，因此位于 svg 内 (10, 10) 的圆实际上将位于 div 的坐标 (40, 40)

【讨论】：