Add gradient color to angular-nvD3 pie chart

Question

I'm using the following example to use pie chart in my app:

http://krispo.github.io/angular-nvd3/#/pieChart

How can I change the color to be gradient, e.g. the following:

Answer 1

First make color category like below

  var c10 = d3.scale.category10();

Define the color as function like below in chart

color: function(d,i){console.log(i); return c10(i)},

Next we define gradients in the svg defs section after the render event of nvd3.(Read inline comments)

dispatch: {
        renderEnd: function(e) {
          //make as many gradient as many slices in the pie.
          var grads = d3.select("svg").append("defs").selectAll("radialGradient").data($scope.data)
            .enter().append("radialGradient")
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", "100%")
            .attr("id", function(d, i) {
              return "grad" + i;
            });
          //gradient start is white
          grads.append("stop").attr("offset", "0.5%").style("stop-color", "white");
          //gradient end is the color of the slice
          grads.append("stop").attr("offset", "27%").style("stop-color", function(d, i) {
            return c10(i);
          });
          //to the slice add the fill for the gradient.
          d3.selectAll(".nv-slice path").attr("fill", function(d, i) { return "url(#grad" + i + ")"; })
        }
      },

Working code here

Hope this helps!