Как создать круглую цветную диаграмму с двумя оттенками?

240

01 июня 2017, 06:53

Я пытаюсь сделать круглую цветную диаграмму, которая выглядит, как на рисунке ниже.

Хочу использовать для этого angularJS, SVG и D3.js

Но не знаю, как получить эти закругленные концы, пожалуйста, помогите. Благодарю.

Перевод вопроса: How to Build this Rounded Two Tone Donut Chart? @Swapnil

Answer 1

Простой ответ: используйте маски.

Мы используем маску для рисования внутренней части рамки (для одного из оттенков ), и вторую маску, чтобы вырезать отверстие посередине.

Маска отверстия на самом деле не нужна. Вы можете сформировать диаграмму с толстыми линиями. Но мне было легче рисовать круговые сектора, а затем вырезать отверстие.

Здесь диаграмма находится в форме SVG. Я оставлю конверсию в D3 вам.

<svg version="1.1"  viewBox="0 0 800 800"  
     baseProfile="full" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <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>