d3: присвоение цвета определенному значению

Question

Когда я обрабатываю данные для круговой диаграммы, я объединяю все небольшие значения в «Другое». Графика окрашивается с использованием d3.scale.category20. Как назначить «Другое» конкретному цвету (светло-серый) из набора цветов и присвоить другим значениям, используя метод по умолчанию?

Обновление: Я ищу идиоматическое решение D3, если оно есть. Что-нибудь еще я могу взломать.

Answer 1

Создайте свой собственный d3.scale.category20 без серого:

var myCategory20Colors = [ 
    0x1f77b4, 0xaec7e8, 
    0xff7f0e, 0xffbb78, 
    0x2ca02c, 0x98df8a, 
    0xd62728, 0xff9896, 
    0x9467bd, 0xc5b0d5, 
    0x8c564b, 0xc49c94, 
    0xe377c2, 0xf7b6d2, 
    0xbcbd22, 0xdbdb8d, 
    0x17becf, 0x9edae5 
].map(function(x) { 
    var value = x + ""; 
    return d3.rgb(value >> 16, value >> 8 & 0xff, value & 0xff).toString(); 
}); 

var myCategory20 = d3.scale.ordinal().range(myCategory20Colors); 

var original = d3.scale.category20(); 

console.log(original("x"), original("y")); 

console.log(myCategory20("x"), myCategory20("y")); 
// they produce the same result #1f77b4 #aec7e8 

(я удалил 0x7f7f7f, 0xc7c7c7,) из списка, вы можете заменить их своими цветами, а также.

Затем вы можете просто проверить данные при выполнении окраски.

g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
     if(d.yourRowName == "Other") { 
      return "grey"; 
     } else { 
      return myCategory20(d.data.age); 
     } 
     });