D3 merge colors to gradients
<p>I have been trying to merge a set of paths in d3, So that one color blends into the other so it appears as though forms a gradient i tried to use  to create a gradient but its always in a single direction which does not work out.</p>

<p>Fiddle here <a href="https://jsfiddle.net/roug3/jnpe5v3p/" rel="nofollow">https://jsfiddle.net/roug3/jnpe5v3p/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var mapGroup = d3.select("svg");

 function renderARC() {

        var txData = {x: 200 , y : 200 , angle : 30};
        var etxD = {etxSN : "TX500"};

        if(d3.select(".arc"+etxD.etxSN).node()){
            return;
        }
        var arcLevel = 5;
        var arcSpan = 20;

        var arcAngle = 2.0944;
        var txAngle = txData.angle + 0;

        var startAngle = txAngle - (arcAngle / 2);
        var endAngle = txAngle + (arcAngle / 2);

        var x = txData.x;
        var y = txData.y;


        var cwidth = 20;

        var dataset = {};
        for(var i = 1;i&lt;= arcLevel;i++){
            dataset[i] = [i];
        }
        var color = ["#ee4035","#f37736","#fdf498","#7bc043","#0392cf"]
        // var color = ["#009933" , "#33cc33" ,"#ff3300" , "#ffcc66" ,"#ff6699" ,"#4dffff"];

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


        var arc = d3.svg.arc();

        var gs = mapGroup.append("g").classed("arc"+etxD.etxSN , true).classed("arcSegment" , true);
      console.log(gs);
            
            var ggs =  gs.selectAll("g").data(d3.values(dataset)).enter().append("g");
           var arcP = ggs.selectAll("path").data(function (d) {
                return pie(d);
            })
            .enter();

           arcP.append("path").
               attr("class" , function (d, i) {
                  return "arcID"+etxD.etxSN+i;
               })
            .attr("fill", function (d, i, j) {
                // var cspan = Math.floor(Math.random() * arcLevel);
                return color[ j ];
            })
            .attr("d", function (d, i, j) {
                 return arc.innerRadius(cwidth * j + arcSpan).outerRadius(cwidth * (j + 1) + arcSpan)(d);
            }).
            attr("transform" , "translate("+x+","+y+")");
    }
    
    renderARC();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
&lt;svg width=500 height=500&gt;&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>Any Suggestions </p>

<p>Thanks</p>