javascript - Angular svg or canvas to use colour gradients -

i using angular , d3 create donut (in directive).

i can quite give filled area colour (in plunker blue). want have svg change colours smoothly from:

0% - 33.3% - red 33.4% - 66.66% - orange 66.7% - 100% green 

directive:

app.directive('donutdirective', function() {     return {         restrict: 'e',         scope: {             radius: '=',             percent: '=',             text: '=',         },         link: function(scope, element, attrs) {             var radius = scope.radius,                 percent = scope.percent,                 percentlabel = scope.text,                 format = d3.format(".0%"),                 progress = 0;              var svg = d3.select(element[0])                 .append('svg')                 .style('width', radius/2+'px')                 .style('height', radius/2+'px');              var donutscale = d3.scale.linear()                 .domain([0, 100])                 .range([0, 2 * math.pi]);              //var color = "#5599aa";             var color = "#018bbb";              var data = [                 [0,100,"#b8b5b8"],                 [0,0,color]             ];              var arc = d3.svg.arc()                 .innerradius(radius/6)                 .outerradius(radius/4)                 .startangle(function(d){return donutscale(d[0]);})                 .endangle(function(d){return donutscale(d[1]);});              var text = svg.append("text")                 .attr("x",radius/4)                 .attr("y",radius/4)                 .attr("dy", ".35em")                 .attr("text-anchor", "middle")                 .attr("font-size","14px")                 .style("fill","black")                 .attr("text-anchor", "middle")                 .text(percentlabel);              var path = svg.selectall("path")                 .data(data)                 .enter()                 .append("path")                 .style("fill", function(d){return d[2];})                 .attr("d", arc)                 .each(function(d) {                     this._current = d;                     // console.log(this._current)                 ;});              // update data!             data = [                 [0,100,"#b8b5b8"],                 [0,percent,color]             ];              path                 .data(data)                 .attr("transform", "translate("+radius/4+","+radius/4+")")                 .transition(200).duration(2150).ease('linear')                 .attrtween("d", function (a) {                     var  = d3.interpolate(this._current, a);                     var i2 = d3.interpolate(progress, percent)                     this._current = i(0);                     // console.log(this._current);                     return function(t) {                         text.text( format(i2(t) / 100) );                         return arc(i(t));                     };                 });         }     }; }); 

plunker: http://plnkr.co/edit/8qgmeqkmm08czxzivrei?p=preview

i want have svg change colours smoothly from:

0% - 33.3% - red 33.4% - 66.66% - orange 66.7% - 100% green 

assuming want color transition/scale one:

see working code this: http://codepen.io/anon/pen/vlvmyv

you can smothly make color transition using d3 linear scale this:

//create color scale smothly change color of donut var colorscale = d3.scale.linear().domain([0,33.3,66.66,100]).range(['#cc0000','#ffa500','#ffa500','#00cc00']); 

then, when update path (with attrtween) make filling animation, take path represents filled part of donut, lets call colorpath , change fill of adding following in tween:

//set color path depending on percentage //using colorscale created before colorpath.style('fill',colorscale(i2(t))) 

your attrtween this:

colorpath.data([[0,percent,color]]) .transition(200).duration(2150).ease('linear') .attrtween("d", function (a) {     var  = d3.interpolate(this._current, a);     var i2 = d3.interpolate(progress, percent)     this._current = i(0);     // console.log(this._current);     return function(t) {         text.text( format(i2(t) / 100) );         colorpath.style('fill',colorscale(i2(t)))         return arc(i(t));     }; }); 

please note update data colorpath: colorpath.data([[0,percent,color]])

the whole working example right here: http://plnkr.co/edit/ox82vgxhcaoxjpvpuel1?p=preview