Question

我需要一些帮助。我正在制作饼图，需要将货币绑定到准确的颜色我或许有这个JSON

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

和这些颜色数组：

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

所以在我的d3图表饼中我想要绑定货币到正确的颜色，欧元绑定蓝色美元绑定红色到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-blocks。另一种方法是使用这样的序数量表：

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

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

如何将颜色与D3.js中的数据绑定？

2 个答案: