如何构建这个圆形的两色调甜甜圈图? [英] 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屋！