Set a specific color to a bubble chart

Question

I would like to set a specific color on the circle of bubble chart in terms of a variable. I can change all the bubble in red for example but not each bubble. My condition is an attribute of d and it define by the content of my JSON.

node.append("circle")
        .attr("r", function(d) { return d.size; })
        .style("fill", "red"); // all my bubble are red but the condition doesn't works
        /* 
        if (condition) {
          .style("fill", "red");
        } else {
          .style("fill","green");
        }
        */

This is the Plunker project : https://plnkr.co/edit/07RZFQoBrBz2xWxmiCl0?p=preview Thanks.

Answer 1

This is the correct syntax:

.style("fill", function(d){
              if (d.size <= 20){
                return "green"
              } else if (d.size <= 40){
                return "orange"
              } else if (d.size <= 70){
                return "blue"
              } else {
                return "red"
              }
            });

I wrote <= just to get some intervals, but you can change this the way you want. And using else if you can set any number of conditions you want.

Here is the Plunker: https://plnkr.co/edit/Q2reQnEFTcL58xNseYXl?p=preview