lundi 29 juin 2020

if else statement in D3.js for custom colour scale

I'm working with the code below:

 let sizeBands = data.map(({size, count}) => size / count);

  sizeBands.forEach(function(colorBand){      
        if (colorBand < 60) {
           console.log(colorBand + " Under 60!")            
        } if (colorBand >= 60)
           console.log(colorBand + " Over 60!")         
      }) 

The console.log()s work fine and are displaying the correct numbers.

I am appending a 'rect' which needs to have the fill returned based on those numbers.

    .attr('fill', function(d) {
      if (d.colorBand <= 55) {
        return "red";
      } else if (d.colorBand >= 56 && d.colorBand <= 60) {
        return "blue";
      } else {
        return "green"
      }
    });

But all I am getting is green 'rects'. How do I get the code to fill the 'rects' with the correct colours?

Aucun commentaire:

Enregistrer un commentaire