javascript - D3.js: Changing the color of the bar depending on the value -

i have been experimenting d3.js bar chart, want change color depending on value of y axis, how achieve this. tried adding linear gradients lose control on it.

the code working on based on this: http://bost.ocks.org/mike/bar/

add following attributes adapt color:

var data = [4, 8, 15, 16, 23, 42];    var width = 420,    barheight = 20;    var x = d3.scale.linear()    .domain([0, d3.max(data)])    .range([0, width]);    var chart = d3.select(".chart")    .attr("width", width)    .attr("height", barheight * data.length);    var bar = chart.selectall("g")    .data(data)    .enter().append("g")    .attr("transform", function(d, i) {      return "translate(0," + * barheight + ")";    });    bar.append("rect")    .attr("width", x)    // add attribute change color of rect    .attr("fill", function(d) {      if (d > 25) {        return "red";      } else if (d > 10) {        return "orange";      }      return "yellow";    })    .attr("height", barheight - 1);    bar.append("text")    .attr("x", function(d) {      return x(d) - 3;    })    .attr("y", barheight / 2)    .attr("dy", ".35em")    // add attribute change color of text    .attr("fill", function(d) {      if (d > 10) {        return "white";      }      return "black";    })    .text(function(d) {      return d;    });

.chart text {    font: 10px sans-serif;    text-anchor: end;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>    <svg class="chart"></svg>