Définir une couleur spécifique à un graphique à bulles

Question

Je voudrais définir une couleur spécifique sur le cercle de graphique à bulles en termes de variable. Je peux changer toute la bulle en rouge par exemple mais pas chaque bulle. Ma condition est un attribut de d et elle est définie par le contenu de mon 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"); 
     } 
     */ 

Ce projet est le Plunker: https://plnkr.co/edit/07RZFQoBrBz2xWxmiCl0?p=preview Merci.

Answer 1

Ceci est la syntaxe correcte:

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

j'ai écrit <= juste pour obtenir des intervalles, mais vous pouvez changer cela comme vous le souhaitez. Et en utilisant else if vous pouvez définir n'importe quel nombre de conditions que vous voulez.

Voici le Plunker: https://plnkr.co/edit/Q2reQnEFTcL58xNseYXl?p=preview

Answer 2

La raison pour laquelle votre code de condition de travail est-il briser l'enchaînement, comme:

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

Vous pouvez utiliser l'état tout en garder enchaînant par ceci:

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

Si la condition est plus de deux Pour la fonctionnalité et la lisibilité, nous créons une fonction.

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

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