Добавить градиент цвета угловому-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

Надеется, что это помогает!