title: Apply a unique colour to each bar in d3.js V4
body: <p>I am trying create a bar chart for top 10 among n number of entities. What I am trying to achieve is to give unique color to each bar. I am able to get the expected results when number of entities is 10 or less. <a href="https://i.stack.imgur.com/z4kx8.png" rel="nofollow noreferrer">This is what I am getting.</a></p>
  
  <p>I want to use colors from <strong>d3.schemeCategory10</strong> only. Here is my <a href="https://plnkr.co/edit/6vyBuR?p=info" rel="nofollow noreferrer">plunker</a> code. </p>
  
  <pre><code>    bar_svg.selectAll("#bar_chart")
      .data(TOP_TEN_CHANNELS)
      .enter().append("rect")
      .attr("rx", 2)         // set the x corner curve radius
      .attr("ry", 2)
      .attr("class", "bar")
      .style("fill", function(d,i){ return color(d.channel);})
      .attr("x", 35)
      .transition() 
      .ease(d3.easePoly)          // apply a transition
      .duration(500)
      .attr("height", y.bandwidth()-5)
      .attr("y", function(d) { return y(d.channel); })
      .attr("width", function(d) { return x(d.views); });
  </code></pre>