d3.scale.category20b restituisce sempre il primo colore

Question

Provo a utilizzare d3.scale.category.20b() per generare una scala di colori, il problema è qualsiasi numero della lista che chiedo, restituisce sempre il primo elemento dell'elenco .

var color = d3.scale.category20b(); 
console.log(color(X)); 

O

console.log(d3.scale.category20b()(X); 

Non importa quale X è, registra sempre # 393b79 che è i primi elementi, secondo il d3 API

Answer 1

Ciò può accadere perché le scale categorici in d3 aggiungono al dominio come nuovi dati entra in gioco. Se ogni ENTER() crea una nuova scala categorica, il dominio della scala categorica rimane lo stesso.

A titolo di esempio, si prega di prendere in considerazione questo jFiddle: http://jsfiddle.net/seldomawake/MV55j/1/ Qui, vediamo che come dati entra, aggiungiamo ad una scala categorica nel namespace globale, $colorScale (codice specifico di seguito).

function redraw(theData) { 
    var localColorScale = d3.scale.category20c(); //< NOT USED HERE 
    var svg = d3.select("svg"); 
    var circles = svg.selectAll("circle") 
        .data(theData).enter().append("circle") 
    var circleAttributes = circles.attr("cx", getRandomInt(50, 450)) 
            .attr("cy", getRandomInt(50, 450)) 
            .attr("r", function (d) { return d.value; }) 
            .style("fill", function() { return $colorScale(getRandomInt(0, 19)); }); 
} 

Tuttavia, se dovessimo sostituire return $colorScale(getRandomInt(0, 19)) con return localColorScale(getRandomInt(0, 19)), non saremmo più abbiamo i dati aggiungono alla gamma della scala categorica, e che porterebbe a un uscita monocolore.

_{Modifica: correzione URL a jsfiddle.}

Answer 2

Quale versione di D3 stai usando? Ho scritto un jsFiddle (D3 3.0.4), i colori vengono visualizzati normalmente:

var color = d3.scale.category20b(); 

var svg = d3.select('#chart').append('svg') 
    .attr('width', 200) 
    .attr('height', 100); 

svg.append('rect') 
    .attr('width', 100) 
    .attr('height', 100) 
    .attr('fill', color(0)); 

svg.append('rect') 
    .attr('x', 100) 
    .attr('width', 100) 
    .attr('height', 100) 
    .attr('fill', color(1)); 

Il risultato è:

Answer 3

In un primo momento ho pensato che questo sarebbe stato un bug con D3. js così creato this jsfiddle che funziona bene.

var data = d3.range(0,20); 
var color = d3.scale.category20b(); 

d3.select('.target').selectAll('div') 
    .data(data) 
    .enter() 
     .append('div') 
     .text(function(d){return color(d);}) 
     .attr('style', function(d){return "background-color:"+ color(d) + ";" ;}) 

E 'stato sollevato da altri sulla versione di D3 che si sta utilizzando. Sembra improbabile che questo sia la causa del problema poiché lo code in question è stato appena toccato. Se il codice non è stato toccato molto e gli altri non hanno problemi solleva la questione del browser in modo compatibile. I sent my jsfiddle to browsershots e non ho visto nessun browser emettere un singolo blocco di colore al posto delle strisce di colore piuttosto attese.

Dopo tutto ciò, non ci sono abbastanza informazioni per rispondere correttamente al problema. Suggerisco di dare un'occhiata per vedere se X sta davvero cambiando apportando una piccola modifica al codice console.log({'color':color(X), 'x':X}).