D3.jsのデータと色をバインドする方法は？

Question

私は助けが必要です。 私はおそらく、このJSON

 [{'rate': 24, 'currency': 'EUR'}, 
     {'rate': 32, 'currency': 'USD'}, 
     {'rate': 13, 'currency': 'GB'} 
     ]; 

と色のこれらの配列を持つ円グラフに取り組んでいますし、正確な色 に通貨をバインドする必要が：

colors = ['red', 'green','blue']; 

ので、私のD3チャートのパイで、私は通貨をバインドしたいです to EURバインドブルー to USDバインドレッド to GBバインドグリーン;

どうすればいいですか？円グラフのパスコードを作る

は次のとおりです。

const color = d3.scale.ordinal().range(colors); 
const path = chartSvg.selectAll('path') 
         .data(pie(data)) 
         .enter() 
         .append('path') 
         .attr('d',arc) 
         .attr('fill',function(d,i){ 
          return color(d.data.currency); 
         }); 

Answer 1

は、この方法を実行します。

var colors = ['red', 'green','blue']; 
const path = chartSvg.selectAll('path') 
         .data(pie(data)) 
         .enter() 
         .append('path') 
         .attr('d',arc) 
         .attr('fill',function(d,i){ 
          if (d.data.currency == "EUR") 
          return color[2]; 
          if (d.data.currency == "USD") 
          return color[0]; 
          if (d.data.currency == "GB") 
          return color[1]; 
         }); 

Answer 2

Cyrilsの答えは動作しますが、それはのif-elseブロックのかなり多くをもたらす可能性があります。別のアプローチは、このように順序尺度を使用することです：あなたは円グラフの塗りつぶしであればブロックを書き込むことができ

var currencyScale = d3.scale.ordinal() 
    .domain(['EUR', 'USD']) 
    .range(['red', 'blue']); 

path.attr('fill',function(d){ 
    return currencyScale(d.data.currency); 
});