Установите определенный цвет на пузырьковую диаграмму

Question

Я хотел бы установить определенный цвет в круге пузырьковой диаграммы в терминах переменной. Я могу изменить весь пузырь красным, например, но не каждый пузырь. Мое условие является атрибутом d, и оно определяется содержимым моего 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"); 
     } 
     */ 

Это проект Plunker: https://plnkr.co/edit/07RZFQoBrBz2xWxmiCl0?p=preview Спасибо.

Answer 1

Это правильный синтаксис:

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

Я написал <= только, чтобы получить некоторые интервалы, но вы можете изменить это, как вы хотите. И используя else if вы можете установить любое количество условий, которые вы хотите.

Вот Plunker: https://plnkr.co/edit/Q2reQnEFTcL58xNseYXl?p=preview

Answer 2

Причина ваше состояние код не работает в это разорвать цепное, как:

d3.select(selector) 
.attr() 
.style() 
.append() 

Вы можете использовать условие время держать сцепление этим:

.style("fill", condition ? "red" : "green") 

Если условие более чем два , для функциональности и удобочитаемости мы создаем функцию.

function color(condition) { 
    switch (expression) { 
    case redCondition: 
     return "red" 
     break; 
    case blueCondition: 
     return "blue" 
     break; 
    default: 
     return "green" 
    } 
} 

.style("fill", color(condition))