NVD3.js coloring specific bars in graph

d3.js, nvd3.js, svg

Solution

You can do:

d3.selectAll("rect.nv-bar")
    .style("fill", function(d, i){
        return d.y > 50 ? "red":"blue";
    });

Problem

Is there a way to color specific bars? If a bar is less than the line, color it red. Code: https://github.com/tvinci/webs/blob/gh-pages/lineplusbar.html Example: http://tvinci.github.io/webs/lineplusbar.html I'd like to do something like this but the value for i is not the y value that I send in. It has been modified: ``` d3.selectAll("rect.nv-bar") .style("fill", function(d, i){ return i > 50 ? "red":"blue"; }); ``` Data: ``` var overview_data=[ { "key" : "Achieved", "bar": true, "values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ] }, { "key" : "Required", "values" : [ [ "1x" , 50] , [ "2x" , 100] , [ "3x" , 150] ] } ].map(function(series) { series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); return series; }); ```

Original source