如何制作这个圆形的双色甜甜圈图表？

Question

我试图制作一个看起来像下面的圆环图

我将使用angularJS，SVG和D3.js

我不知道如何获得那些圆润的结尾，请帮忙。感谢。

Answer 1

简单回答：你使用面具。

我们使用面具来绘制表圈的内部。还有一个面具可以在中间切开洞。

孔掩模不是必需的。你可以用粗线形成甜甜圈。但是，我似乎更容易画出圆形扇形，然后制造漏洞。

这是SVG形式。我会把转换到D3给你。

<svg width="600" height="600">
    <defs>
        <!-- masks out the area outside and inside the inner bevel region -->
        <mask id="innerbevel">
            <rect width="100%" height="100%" fill="black"/>
            <circle cx="0" cy="0" r="235" fill="white"/>
        </mask>
        <!-- cuts hole in centre of graph -->
        <mask id="centrehole">
            <rect x="-100%" y="-100%" width="200%" height="200%" fill="white"/>
            <circle cx="0" cy="0" r="195" fill="black"/>
        </mask>
    </defs>

    <!-- Graph is drawn centred at (0,0). The transform moves it into middle of SVG. -->
    <!-- The mask forms the hole in the centre. -->
    <g transform="translate(300,300)" mask="url(#centrehole)">
        <!-- outer bevel -->
        <g>
            <!-- light blue segment -->
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#89e4d2"/>
            <!-- red segment -->
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#f394a2"/>
            <!-- blue segment -->
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#a3a4ff"/>

            <!-- light blue rounded end -->
            <circle cx="0" cy="235" r="40" fill="#89e4d2"/>
            <!-- red rounded end -->
            <circle cx="-235" cy="0" r="40" fill="#f394a2"/>
            <!-- blue rounded end -->
            <circle cx="0" cy="-235" r="40" fill="#a3a4ff"/>
        </g>
        <!-- inner bevel - same as above but with different colours and is masked -->
        <g mask="url(#innerbevel)">
            <!-- light blue segment -->
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#5bc8b7"/>
            <!-- red segment -->
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#ef6974"/>
            <!-- blue segment -->
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#6b5dff"/>

            <!-- light blue rounded end -->
            <circle cx="0" cy="235" r="40" fill="#5bc8b7"/>
            <!-- red rounded end -->
            <circle cx="-235" cy="0" r="40" fill="#ef6974"/>
            <!-- blue rounded end -->
            <circle cx="0" cy="-235" r="40" fill="#6b5dff"/>
        </g>
    </g>

</svg>