添加渐变颜色到角nvD3饼图

Question

我使用下面的示例中使用饼图在我的应用：

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

如何更改颜色要梯度，例如以下内容：

Answer 1

首先使颜色类别像下面

var c10 = d3.scale.category10(); 

定义的颜色作为函数如下面在图

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

接下来，我们定义在svg defs部梯度后nvd3的渲染事件。（阅读内嵌评论）

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 + ")"; }) 
     } 
     }, 

工作代码here

希望这有助于！