将径向渐变添加到具有相同中心点的多个分离弧

Question

我需要为一个svg元素添加多个弧（每个都有不同的动画）。我需要用径向渐变填充它们，但是现在，径向渐变的中心不在整个svg元素的中心，而是在特定弧的中心。它现在看起来如何。首先，我在defs中创建所需的所有渐变。

var tmpgrad=null;

    for( var k = 0; k<data.length;k++){
        tmpgrad = grads
            .append("radialGradient")
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("r", "50%")
            .attr("id", function(d, i) { return "grad" + k; });

        tmpgrad
            .append("stop")
            .attr("offset", "0%")
            .style("stop-color", data[k].endColor)
            .style("stop-opasity", 0);
        tmpgrad
            .append("stop")
            .attr("offset", "100%")
            .style("stop-color",data[k].startColor)
            .style("stop-opasity", 1);
    }

然后我用不同的选项制作弧线：

    var width= 1200;
    var height=360;

    var oArc = d3.svg.arc()
        .innerRadius(iRadius)
        .outerRadius(oRadius);

    var oPie = d3.layout.pie()
        .startAngle( sA )
        .endAngle( eA )
        .sort(null);

    var group = svgDrawer.append("g");


    var oPath = group.selectAll("g")
        .data(oPie([0,200]))
        .enter()
        .append("path");

    oPath
        .attr("fill",function(d, i){ if(i==1){ i=0; } else { i = id; } return "url(#grad" + i +")"; })
        .attr("d",oArc)
        .each(function(d){
            this._current = d;
        });

但是在我之前说过的结果中，我得到了在每个弧元素（实际路径）中间开始渐变的分离弧。我该怎么解决呢。

我是svg和javascript主题的初学者。