添加漸變顏色到角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

希望這有助於！