如何构建这个圆的双色圆环图？ [英] How to Build this Rounded Two Tone Donut Chart?

问题描述

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

I'm trying to make a donut chart that looks like one below

我将使用angularJS，SVG和D3.js

I'll be using angularJS, SVG and D3.js

我不知道如何得到这些圆的结束，请帮助。感谢。

I've no clue how to get those rounded ends, Please help. Thanks.

推荐答案

简单的回答：你使用面具。

Simple answer: you use masks.

使用面罩绘制挡板的内部。和一个在中间切开洞的面具。

We use a mask to draw the inner portion of the bezel. And a mask to cut the hole in the middle.

洞面具不是真的必要。你可以用粗线形成甜甜圈。但是，我似乎更容易画圆形部分，然后打洞。

The hole mask isn't really necessary. You could form the donut with thick lines. But it seemed easier to me to draw circular sectors, then make the hole.

这里是SVG形式。我将把转换结果保留到D3。

Here it is in SVG form. I'll leave the conversion to D3 to you.

<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>

这篇关于如何构建这个圆的双色圆环图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！