向 angular-nvD3 饼图添加渐变颜色答案

【问题标题】：Add gradient color to angular-nvD3 pie chart向 angular-nvD3 饼图添加渐变颜色
【发布时间】：2015-12-21 12:18:07
【问题描述】：

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

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

如何将颜色更改为渐变，例如以下：

【问题讨论】：

标签： angularjs gradient nvd3.js radial-gradients angularjs-nvd3-directives

【解决方案1】：

首先制作如下颜色类别

  var c10 = d3.scale.category10();

在图表中将颜色定义为如下函数

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

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

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

希望这会有所帮助！

【讨论】：