Как связать цвет с данными в D3.js?

Question

Мне нужна помощь. Я работаю на круговой диаграмме и нужно привязать валюту к точной цветопередаче у меня есть, возможно, это JSON

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

и эти массивы цветов:

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

так в моей d3 диаграмме пироге я хочу привязку валюты до нужного цвета, EUR привязать синий to USD bind red to GB bind green;

как я могу это сделать?

делает код пути круговой диаграммы является:

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

Хотя Кириллов ответ работает это может привести к довольно много, если это-ELSE-блоков. Другой подход будет использовать порядковую шкалу, как это:

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

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