newcomer newcomer - 4 months ago 12
Javascript Question

Color fill in D3 gives error in If Loop

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

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" >