D3js разбить окружность

Есть некая окружность. Которая соответствует одной "порции" данных. И заполняется в зависимости от них. Например: максимум данных, что может вместить окружность 180. Тогда круг полностью сомкнут. Если 60, то пол круга залито градиентом, пол нет. Так вот нужно разбить данный круг на круг который состоит из мелких кусочков. Код который есть

$(document).ready(function() {
            var height = 100,
                width = 100,
                margin = 0,
                data = [{
                        proposal: "proposal1", //видимая область
                        rate: 135,
                    },
                {
                    proposal: "proposal2", //не видимая область
                    rate: 45
                }
            ];

        // задаем радиус
        var radius = Math.min(width - 2 * margin, height - 2 * margin) / 2; //задаем радиус которой впишеться в область
        // создаем элемент арки с радиусом
        var arc = d3.svg.arc()
            .outerRadius(radius)
            .innerRadius(radius - 10);


        var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) {
                return d.rate;
            });
        //создание тега svg
        var svg = d3.select(".pie-graphic").append("svg")
            .attr("class", "axis")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform",
                "translate(" + (width / 2) + "," + (height / 2) + ")");

        //Добавление всех частей диаграммы
        var g = svg.selectAll(".arc")
            .data(pie(data))
            .padAngle(.03)
            .enter().append("g")
            .attr("class", "arc");


        var mainGradient = svg.append('linearGradient')
            .attr('id', 'mainGradient');
        // Create the stops of the main gradient. Each stop will be assigned
        // a class to style the stop using CSS.
        mainGradient.append('stop')
            .attr('class', 'stop-left')
            .attr('offset', '0');
        mainGradient.append('stop')
            .attr('class', 'stop-right')
            .attr('offset', '1');

        var myCircle = {
            "x_axis": 30,
            "y_axis": 30,
            "radius": 20,
            "color": "green"
        };
        g.append("path")
            .classed('filled', true)
            .attr("d", arc)
            .append('circle')
            .attr("cx", 30)
            .attr("cy", 30)
            .attr("r", 20);



        var circleAnin = g.selectAll('path');

        circleAnin
            .transition()
            .duration(2000)
            .attrTween("d", tweenPie)
            .transition()
            .ease("elastic")
            .delay(function(d, i) {
                return 2000 + i * 50;
            })
            .duration(750)
            .attrTween("d", tweenDonut);
        function tweenPie(b) {
            b.innerRadius = 0;
            var i = d3.interpolate({
                startAngle: 0,
                endAngle: 0
            }, b);
            return function(t) {
                return arc(i(t));
            };
        }

        function tweenDonut(b) {
            b.innerRadius = radius * .6;
            var i = d3.interpolate({
                innerRadius: 0
            }, b);
            return function(t) {
                return arc(i(t));
            };
        }

    });

Что должно получиться:

Есть идея разбивать одну порцию данных, на несколько одинаковых мелкий порций. И тогда создавать окружность, но мне кажется это глупой затеей.