将渐变颜色添加到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

希望这有帮助！