angular-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)},

接下来我们在 nvd3 的渲染事件之后的 svg defs 部分定义渐变。（阅读内联评论）

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

希望对您有所帮助！