Farbe füllen D3 gibt Fehler in If Schleife

Question

Ich versuche, Farben bedingt zu füllen, aber es scheint wenn sonst Schleife nicht in die dritte Bedingung eintritt. Hier

ist der Arbeits Code aber mit etwas Fehler in If Else-Anweisung

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) + ")"; 
      }      
      }); 

hier, um die Arbeits Geige ist enter link description here

Ich verstehe nicht, warum es nicht das Lesen ist letzte Bedingung?

Answer 1

Um ehrlich zu sein, ich weiß nicht, ob ich das als Antwort posten sollte.

Aber wie auch immer, Ihre else if-Anweisung ist falsch.

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

Ihr Fehler:

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

So wan't es die sonst Bedingung eintritt.

Hoffe, das hilft.

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) { 
 
\t \t \t \t if (i <= 5) { 
 
\t \t \t \t \t return "rgb(" + (d *5) + ", " + (d * 1) + ", " + (d * 1) + ")"; 
 
       } 
 
\t \t \t \t else if (5 < i && i <= 9) { 
 
\t \t \t \t \t return "rgb(" + (d * 1) + ", " + (d * 3) + ", " + (d * 5) + ")"; 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
    \t \t \t \t return "rgb(" + (d * 2) + ", " + (d * 4) + ", " + (d * 2) + ")"; 
 
\t \t \t \t } \t \t \t  \t \t  
 
\t \t \t \t }); 
 
\t \t \t \t \t

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class = "col-md-6" id = "chart1" > \t

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) { 
 
\t \t \t \t if (i <= 5) { 
 
\t \t \t \t \t return "rgb(" + (d *5) + ", " + (d * 1) + ", " + (d * 1) + ")"; 
 
       } 
 
\t \t \t \t else if (5 < i && i <= 9) { 
 
\t \t \t \t \t return "rgb(" + (d * 1) + ", " + (d * 3) + ", " + (d * 5) + ")"; 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
    \t \t \t \t return "rgb(" + (d * 2) + ", " + (d * 4) + ", " + (d * 2) + ")"; 
 
\t \t \t \t } \t \t \t  \t \t  
 
\t \t \t \t }); 
 
\t \t \t \t \t

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class = "col-md-6" id = "chart1" > \t