title: Add different colors to each bar in D3
body: <p>I am using d3 library to display bar charts with each bar having a different color.
  Here is my code -</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
  
      .chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
      }
  
      &lt;/style&gt;
  &lt;div class="chart"&gt;&lt;/div&gt;
  &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var data  = [{"label":"Recommended", "value":60},{"label":" You", "value":60},{"label":"Peers","value":40}];
  var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  
  var x = d3.scale.linear()
      .domain([0, d3.max(data)])
      .range([0, 420]);
  
  
  
  d3.select(".chart")
    .selectAll("div")
      .data(data)
      .enter().append("div")
   // .attr("width",400)
   // .attr("depth",400)
     .style("width", function(d) { return d.value + "px"; })
    // .style("fill", function(d,i) { return data[i].color;})
     .text(function(d,i) { return data[i].label; });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I am unable to get different color for each bar. 
  Can anyone please help me fix it.</p>