Color fill in D3 gives error in If Loop

Question

I am try to fill colors conditionally but it seems if else loop is not entering the third condition.

Here is the working code but with some error in If Else statement

code

        var w = 400;
              var h = 40;
              var barPadding = 1;
              var heybaby = 10;

           var aa = 15;
           var bb = 17;
           var cc = 13;
           var dd = 8;
           var ee = 11;
           var ff = 19;
           var gg = 8;
           var hh = 15;
           var ii = 14;
           var jj = 15;
           var kk = 16;
           var ll = 11;
           var mm = 13;
           var nn = 12;

             var data1heatmap = [ aa, bb, cc, dd, ee, ff, gg, hh, ii, jj,kk, ll, mm, nn ];


              //Create SVG element
              var svg = d3.select("#chart1")
                    .append("svg")
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .attr("viewBox","0 0 400 40")
                        .attr("preserveAspectRatio","xMinYMin meet")
                        .append("g")
                        .attr("transform", "translate(1,1)");

              svg.selectAll("rect")
                 .data(data1heatmap)
                 .enter()
                 .append("rect")
                 .attr("x", function(d, i) {
                    return i * (w / data1heatmap.length);
                 })
                 .attr("y", 0)
                 .attr("width", 25)
                 .attr("height", 25)
                 .attr("rx", 0)
                .attr("ry", 0)
                 .attr("fill", function(d,i) {
              if (i <= 5) {
            return "rgb(" + (d *5) + ", " + (d * 1) + ", " + (d * 1) + ")";
                    }
            else if (5 < i <= 9) {
            return "rgb(" + (d * 1) + ", " + (d * 3) + ", " + (d * 5) + ")";
            }
            else {
            return "rgb(" + (d * 2) + ", " + (d * 4) + ", " + (d * 2) + ")";
            }                      
            });

Here is the working fiddle enter link description here

I dont understand why it is not reading the last condition ?

Answer 1

To be honest, I don't whether I should post this as an answer.

But anyway, your else if statement is wrong.

else if (5 < i && i <= 9) {
                return "rgb(" + (d * 1) + ", " + (d * 3) + ", " + (d * 5) + ")";
}

Your mistake :

else if (5 < i <= 9)  // this will be always true if the value of i is greater than 5

So, it wan't entering the else condition.

Hope this helps.

 var w = 400; var h = 40; var barPadding = 1; var heybaby = 10; var aa = 15; var bb = 17; var cc = 13; var dd = 8; var ee = 11; var ff = 19; var gg = 8; var hh = 15; var ii = 14; var jj = 15; var kk = 16; var ll = 11; var mm = 13; var nn = 12; var data1heatmap = [ aa, bb, cc, dd, ee, ff, gg, hh, ii, jj,kk, ll, mm, nn ]; //Create SVG element var svg = d3.select("#chart1") .append("svg") .attr("width", "100%") .attr("height", "100%") .attr("viewBox","0 0 400 40") .attr("preserveAspectRatio","xMinYMin meet") .append("g") .attr("transform", "translate(1,1)"); svg.selectAll("rect") .data(data1heatmap) .enter() .append("rect") .attr("x", function(d, i) { return i * (w / data1heatmap.length); }) .attr("y", 0) .attr("width", 25) .attr("height", 25) .attr("rx", 0) .attr("ry", 0) .attr("fill", function(d,i) { if (i <= 5) { return "rgb(" + (d *5) + ", " + (d * 1) + ", " + (d * 1) + ")"; } else if (5 < i && i <= 9) { return "rgb(" + (d * 1) + ", " + (d * 3) + ", " + (d * 5) + ")"; } else { return "rgb(" + (d * 2) + ", " + (d * 4) + ", " + (d * 2) + ")"; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div class = "col-md-6" id = "chart1" > 

Answer 2

 var w = 400; var h = 40; var barPadding = 1; var heybaby = 10; var aa = 15; var bb = 17; var cc = 13; var dd = 8; var ee = 11; var ff = 19; var gg = 8; var hh = 15; var ii = 14; var jj = 15; var kk = 16; var ll = 11; var mm = 13; var nn = 12; var data1heatmap = [ aa, bb, cc, dd, ee, ff, gg, hh, ii, jj,kk, ll, mm, nn ]; //Create SVG element var svg = d3.select("#chart1") .append("svg") .attr("width", "100%") .attr("height", "100%") .attr("viewBox","0 0 400 40") .attr("preserveAspectRatio","xMinYMin meet") .append("g") .attr("transform", "translate(1,1)"); svg.selectAll("rect") .data(data1heatmap) .enter() .append("rect") .attr("x", function(d, i) { return i * (w / data1heatmap.length); }) .attr("y", 0) .attr("width", 25) .attr("height", 25) .attr("rx", 0) .attr("ry", 0) .attr("fill", function(d,i) { if (i <= 5) { return "rgb(" + (d *5) + ", " + (d * 1) + ", " + (d * 1) + ")"; } else if (5 < i && i <= 9) { return "rgb(" + (d * 1) + ", " + (d * 3) + ", " + (d * 5) + ")"; } else { return "rgb(" + (d * 2) + ", " + (d * 4) + ", " + (d * 2) + ")"; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div class = "col-md-6" id = "chart1" >