d3: eine Farbe einem bestimmten Wert zuweisen

Question

Wenn ich Daten für ein Kreisdiagramm verarbeite, kombiniere ich alle kleinen Werte in 'Andere'. Das Diagramm wird mit d3.scale.category20 eingefärbt. Wie kann ich "Andere" einer bestimmten Farbe (hellgrau) aus der Farbpalette zuweisen und andere Werte mit der Standardmethode zuweisen?

Update: Ich bin auf der Suche nach einer idiomatischen D3-Lösung, wenn es eine gibt. Sonst kann ich mich selbst hacken.

Answer 1

Erstellen Sie Ihre eigenen d3.scale.category20 ohne grau:

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 

(I entfernt 0x7f7f7f, 0xc7c7c7,) aus der Liste, können Sie sie mit Ihren eigenen Farben ersetzen auch.

Dann können Sie einfach auf die Daten beim Färben überprüfen.

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