D3 merge colors to gradients

Question

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.

Fiddle here https://jsfiddle.net/roug3/jnpe5v3p/

 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<= 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();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=500 height=500></svg>

Any Suggestions

Thanks

Answer 1

This is as close as I could get it : https://jsfiddle.net/thatoneguy/jnpe5v3p/2/

With the help of these :

• http://jsfiddle.net/Qh9X5/1110/
• http://www.w3schools.com/svg/svg_grad_radial.asp

Basically you have to create a radial blur using the dataset :

  var grads = mapGroup.append("defs").selectAll("radialGradient").data(pie(d3.values(dataset)))
     .enter().append("radialGradient")
     .attr("gradientUnits", "userSpaceOnUse")
     .attr("cx", 0)
     .attr("cy", 0)
     .attr("r", function(d, i) {
       return cwidth * (i + 1) + arcSpan
     })
     .attr("id", function(d, i) {
       return "grad" + i;
     }).attr("transform", "translate(" + x + "," + y + ")");;

   grads.append("stop")
     .attr("offset", "80%")
     .style("stop-color", function(d, i) {return color[i];});
   grads.append("stop")
     .attr("offset", "100%")
     .style("stop-color", function(d, i) {
       if (color[i + 1]) {
         console.log(color[i + 1])
         return color[i + 1];
       } else {
         return color[i];
       }
     }) 

Then select this to fill your paths :

 arcP.append("path").
   attr("class", function(d, i) {
       return "arcID" + etxD.etxSN + i;
     })
     .attr("fill", function(d, i) {
       console.log(count)
       count++;
       return "url(#grad" + count + ")";
     })
     .attr("d", function(d, i, j) {
       return arc.innerRadius(cwidth * j + arcSpan).outerRadius(cwidth * (j + 1) + arcSpan)(d);
     }).
   attr("transform", "translate(" + x + "," + y + ")");

 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 <= 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();

   var grads = mapGroup.append("defs").selectAll("radialGradient").data(pie(d3.values(dataset)))
     .enter().append("radialGradient")
     .attr("gradientUnits", "userSpaceOnUse")
     .attr("cx", 0)
     .attr("cy", 0)
     .attr("r", function(d, i) {
       return cwidth * (i + 1) + arcSpan
     })
     .attr("id", function(d, i) {
       return "grad" + i;
     }).attr("transform", "translate(" + x + "," + y + ")");;

   grads.append("stop")
     .attr("offset", "80%")
     .style("stop-color", function(d, i) {return color[i];});
   grads.append("stop")
     .attr("offset", "100%")
     .style("stop-color", function(d, i) {
       if (color[i + 1]) {
         console.log(color[i + 1])
         return color[i + 1];
       } else {
         return color[i];
       }
     }) 

   var count = -1;

   arcP.append("path").
   attr("class", function(d, i) {
       return "arcID" + etxD.etxSN + i;
     })
     .attr("fill", function(d, i) {
       console.log(count)
       count++;
       return "url(#grad" + count + ")";
     })
     .attr("d", function(d, i, j) {
       return arc.innerRadius(cwidth * j + arcSpan).outerRadius(cwidth * (j + 1) + arcSpan)(d);
     }).
   attr("transform", "translate(" + x + "," + y + ")");






 }

 renderARC();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=500 height=500></svg>

It isn't perfect but will put you on the right track :) Hope this helps