如何建立这种圆角双色圆环图？ [英] How to Build this Rounded Two Tone Donut Chart?

问题描述

我试图做一个圆环图，看起来像以下任一

我将使用angularJS，SVG和D3.js

我不知道如何获得这些圆端，请帮助。谢谢你。

解决方案

答案很简单：你用口罩

。

我们使用一个掩模来绘制挡板的内侧部分。和掩模削减在中间的孔中。

孔面膜是不是真的有必要。你可以形成粗线的甜甜圈。但它似乎更容易我画扇形，然后再进行漏洞。

这是SVG格式。我将离开转化为维生素D3你。

\r

\r

＆LT; SVG WIDTH =600HEIGHT =600＆GT;\r
    ＆LT;＆DEFS GT;\r
        ＆所述;！ - 口罩出外部的区域和内部斜面区域内 - ＆GT;\r
        ＆所述;屏蔽ID =innerbevel＆GT;\r
            ＆LT; RECT WIDTH =100％HEIGHT =100％补=黑/＆GT;\r
            ＆LT;圈CX =0CY =0R =235补=白色/＆GT;\r
        ＆LT; /掩码＆GT;\r
        ＆LT;！ - 切孔图形的中心 - ＆GT;\r
        ＆所述;屏蔽ID =centrehole＆GT;\r
            ＆所述;矩形X = - 100％Y = - 100％宽度=200％高度=200％补=白/＆GT;\r
            ＆LT;圈CX =0CY =0R =195补=黑/＆GT;\r
        ＆LT; /掩码＆GT;\r
    ＆LT; / DEFS＆GT;\r
\r
    ＆所述;！ - 图形绘制在（0,0）为中心的。变换将其移动SVG的中间。 - ＆GT;\r
    ＆所述;！ - 掩模形成在中心的孔。 - ＆GT;\r
    ＆LT克变换=翻译（300,300）面具=URL（#centrehole）＆GT;\r
        ＆LT;！ - 外锥 - ＆GT;\r
        ＆所述g取代;\r
            ＆LT;！ - 浅蓝色段 - ＆GT;\r
            ＆LT;路径D =M0 0 0 -275 275 275 0 0 1 0 275补=＃89e4d2/＆GT;\r
            ＆LT;！ - 红段 - ＆GT;\r
            ＆LT;路径D =M0 0 0 275 275 275 0 0 1 0 -275补=＃f394a2/＆GT;\r
            ＆LT;！ - 青段 - ＆GT;\r
            ＆LT;路径D =0 M0 -275 0 275 275 0 0 1 0 -275补=＃a3a4ff/＆GT;\r
\r
            ＆LT;！ - 淡蓝色圆端 - ＆GT;\r
            ＆LT;圈CX =0CY =235R =40补=＃89e4d2/＆GT;\r
            ＆LT;！ - 红色圆形端 - ＆GT;\r
            ＆LT;圈CX = - 235CY =0R =40补=＃f394a2/＆GT;\r
            ＆LT;！ - 蓝色圆形端 - ＆GT;\r
            ＆LT;圈CX =0CY = - 235R =40补=＃a3a4ff/＆GT;\r
        ＆所述; / g取代;\r
        ＆LT;！ - 内锥 - 与上面相同，但不同的颜色和被屏蔽 - ＆GT;\r
        ＆LT克面膜=URL（#innerbevel）＆GT;\r
            ＆LT;！ - 浅蓝色段 - ＆GT;\r
            ＆LT;路径D =M0 0 0 -275 275 275 0 0 1 0 275补=＃5bc8b7/＆GT;\r
            ＆LT;！ - 红段 - ＆GT;\r
            ＆LT;路径D =M0 0 0 275 275 275 0 0 1 0 -275补=＃ef6974/＆GT;\r
            ＆LT;！ - 青段 - ＆GT;\r
            ＆LT;路径D =0 M0 -275 0 275 275 0 0 1 0 -275补=＃6b5dff/＆GT;\r
\r
            ＆LT;！ - 淡蓝色圆端 - ＆GT;\r
            ＆LT;圈CX =0CY =235R =40补=＃5bc8b7/＆GT;\r
            ＆LT;！ - 红色圆形端 - ＆GT;\r
            ＆LT;圈CX = - 235CY =0R =40补=＃ef6974/＆GT;\r
            ＆LT;！ - 蓝色圆形端 - ＆GT;\r
            ＆LT;圈CX =0CY = - 235R =40补=＃6b5dff/＆GT;\r
        ＆所述; / g取代;\r
    ＆所述; / g取代;\r
\r
＆LT; / SVG＆GT;

\r

\r

\r

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

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.

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