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:

enter image description here

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


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more