如何将折线添加到我的简单 svg 圆环图？ [没有图书馆]

Question

我想构建一个简单的 svg 圆环图，标签和折线将扇区连接到标签文本，就像这样。

我知道这可以使用 d3.js 实现，但我只能使用没有任何库的简单图表。

这是我现在的代码；

<div class="wrapper">
  <svg viewBox="0 0 42 42" preserveAspectRatio="xMidYMid meet" class="donut">
    <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
    <circle class="donut-segment" data-per="20" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#49A0CC" stroke-width="3" stroke-dasharray="50 50" stroke-dashoffset="25"></circle>
    <circle class="donut-segment" data-per="30" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#254C66" stroke-width="3" stroke-dasharray="50 50" stroke-dashoffset="75"></circle>   
   <!--   stroke-dashoffset formula:
     100 − All preceding segments’ total length + First segment’s offset = Current segment offset
   -->
  </svg>
</div>

关于如何绘制多段线并在不重叠的情况下正确放置它们的任何提示？

编辑：我想向组件输入动态数据，以便在数据更改时绘制图表。

d3 中的实现：impl1

Answer 1

我的主要疑问是计算圆环图必须绘制的弧线的点数，然后由于 .

的惊人回答，我明白了这一点

我所要做的就是为折线添加第三个点，如果 text.xCoordinate 更靠近 svg 的任一侧，我将它向左或向右移动预设量。我还必须将标签拆分为多个 <tspan>，因为 <text> 元素不会破坏长文本，而长标签会被 SVG 剪掉。也可以在 <foreignObject> 中附加 HTML 并正确定位，以解决文本换行问题。

另一种选择是使用 <path> 元素生成圆弧，但我不确定如何计算每个圆弧的质心。

如何将折线添加到我的简单 svg 圆环图？ [没有图书馆]

How do I add polylines to my simple svg donut chart? [NO LIBRARIES]

javascript

svg

graph

angular