如何使用d3.js将padAngle添加到弧的一个边缘

Question

有谁能告诉我如何使用d3.js将padAngle添加到弧的一个边缘？

我使用d3.js创建了甜甜圈图表。并发现可以使用.padAngle（）在弧之间添加空格。我实现了它。根据我的要求，我只需要在弧的一侧添加填充。

任何人都可以建议我如何实现它？

根据我的要求，我应该为每3个弧添加额外的填充。所以我在arc的顶部使用paddingFunction（它是自定义的）传递填充。但它增加了双方。

以下是我的代码：

var data = [46.00, 67, 50.00, 10.00,30.00,40.00],
        color = ['red', 'green', 'black', 'pink','blue','orange'],
        grpStrk = [0.1, 0.1, 0.5, 0.1, 0.1, 0.5],           
        width = '272',
        height = '272',
        radius = height/2 - 11;



/* function to render donut chart as per values and colors */   
function renderSavingsDonutChart(data, color, grpStrk) {
    try {
        d3
    } catch (err) {
        return false;
    }

    /* function to return padding for chart arc based on flag to differenciate groups */
    var paddingFunction = function(d,i) {           
        return grpStrk[i];
    };
    var arc = d3.svg.arc().innerRadius(radius-20).outerRadius(radius);
    var pie = d3.layout.pie().sort(null);
    if(isMobile()){         
        width = 257;
        height = 257;
        var arc = d3.svg.arc().innerRadius(radius-25).outerRadius(radius);
        var forVbWidth = width-4;
        var forVbHeight = height-4;
        var svg = d3.select("#results-donut-chart").append("svg").attr("width", width).attr("height", height).attr("viewBox","2 2 " + forVbWidth + " " + forVbHeight).attr("preserveAspectRatio","xMidYMid").append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    }else{                  
        var svg = d3.select("#results-donut-chart").append("svg").attr("width", width).attr("height", height).attr("viewBox","9 9 " + (width-19) + " " + (height-19)).attr("preserveAspectRatio","xMidYMid").append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    }
    svg.selectAll("path")
    .data(pie(data))
    .enter()
    .append("path")
    .style(
        {           
            "fill": function(d, i) {                
            return color[i]; 
        }
    })
    //.attr("d", arc);
    .attr("d", arc.padAngle(paddingFunction));

    //On Resize
    var aspect = width / height,
        chart = $("#results-donut-chart svg");
    $(window).on("resize load", function() {
        var targetWidth = chart.parent().width();
        chart.attr("width", targetWidth);
        chart.attr("height", targetWidth / aspect);
    }); 
}

/*Calling savings donut on page load*/
renderSavingsDonutChart(data, color, grpStrk);