バブルチャートに特定の色を設定する

Question

バブルチャートの円に特定の色を設定したいと思います。私は赤ですべてのバブルを変えることができますが、バブルではありません。私の条件はdの属性で、JSONの内容によって定義されます。 https://plnkr.co/edit/07RZFQoBrBz2xWxmiCl0?p=preview ありがとう：

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プロジェクトです。

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

あなたの条件コードが機能していない理由は、それは同様に、チェーンを破るです：条件が二つ以上ある場合

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

：これで連鎖を維持しながら、

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

あなたが条件を使用することができます機能性と読みやすさの両方を考慮して、関数を作成します。

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

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