Einstellung verschiedener Farben für verschiedene Balken unter Verwendung der Farbmatrix

Question

Ich versuche, verschiedene Farben für verschiedene Balken mit der Kiran's example einzustellen.

Es ist ein Stück Code, den ich es tun verwenden:

var colors =['#0000b4','#0082ca','#0094ff','#0d4bcf','#0066AE','#074285','#00187B','#285964']; 

var colorScale = d3.scale.quantize() 
       .range(colors); 

colorScale.domain(data.map(function(d) { return d.id; })); 

svg.selectAll(".bar") 
    .data(data) 
.enter().append("rect") 
    .attr("class", "bar") 
    .attr("x",0) 
    .attr("y", function(d){return y(d.id);}) 
    .attr('fill',function(d){ return colorScale(d.id); }) 
    .attr("width", function(d) {return x(d.value);}) 
    .attr("height", y.rangeBand()); 

Es funktioniert nicht. Und ich weiß nicht warum. Meine working code.

Jede Hilfe wird geschätzt. Vielen Dank!

Answer 1

Hier sind die eine Aktualisierung: https://jsfiddle.net/1nujczwh/10/

alt: https://jsfiddle.net/1nujczwh/6/

Dies ist vor allem wegen Ihrer CSS ist:

.bar { 
    fill: steelblue; 
} 

es überschreibt die Fill-Attribut.

Und da ich nicht wusste, wie man mit Ihrer Farbskala arbeitet, habe ich die colorScale (Index) verlassen.

Answer 2

Quantize Skalen akzeptieren numbers as their domain, aber die von Ihnen verwendeten IDs sind Strings (Nord, Ost, usw.). Verwenden Sie ein ordinal scale stattdessen für eine geeignete Transformation:

var colorScale = d3.scale.ordinal() 
       .range(colors); 

Und eine Demo https://jsfiddle.net/nikoshr/gLw8facy/