Come utilizzare i gradienti SVG per visualizzare i colori variabili in relazione alle dimensioni dell'area colorata

Question

Sto utilizzando SVG e D3 per creare grafici a barre e una domanda su come colorarli. Ho cercato molte domande su questo sito e su altri e non ho ancora trovato nessuno con lo stesso problema.

Vorrei che ogni barra iniziasse in basso con un colore, (giallo, ad esempio) e, man mano che la barra diventa più alta, mescolate progressivamente in più del secondo colore, (rosso, ad esempio), in modo che le barre alla loro massima altezza potenziale sarebbe solo il secondo colore. In questo esempio, le parti superiori delle barre che sono la metà della loro altezza potenziale sarebbero arancioni.

Sono stato in grado di scrivere una funzione per produrre, per una barra di qualsiasi altezza, un gradiente lineare unico che colorerebbe le barre come desiderato.

Tuttavia, poiché questo grafico è dinamico e le altezze delle barre possono cambiare molte volte al secondo quando i dati vengono aggiornati, la creazione e l'applicazione di un nuovo gradiente ogni volta e per ogni barra non è sicuramente efficiente e potrebbe comportare gravi ritardo nel rinfrescare le barre. (Ammetto che in realtà non ho provato questo con un caso di test statico, quindi potrei sbagliarmi su quest'ultima ipotesi.)

Utilizzare un gradiente statico ovviamente produce qualcosa di simile, dove i colori sono mescolati secondo l'altezza della barra, non l'altezza della regione:

Nel mio scenario desiderato, tuttavia, le barre più piccole dovrebbero avere rispettivamente molto poco rosso o blu scuro.

mia domanda, infine, è questo: c'è un modo per

1. creare un singolo gradiente che viene applicato alla regione SVG stessa (facile)
2. hanno detto gradiente mascherato in qualche modo (facile)
3. quindi non mascherato in modo selettivo sotto i rettangoli che rappresentano le barre del grafico? (???)

Oppure, c'è qualche altra tecnica che sto trascurando?

Grazie

Answer 1

Questo è semplice da implementare, ma un po 'difficile da afferrare, è necessario specificare che le unità di gradiente sono userSpaceOnUse e quindi definire la regione in cui si desidera applicare attraverso x1, x2, y1, y2 :

var gradient = svg 
    .append("linearGradient") 
    .attr("y1", minY) 
    .attr("y2", maxY) 
    .attr("x1", "0") 
    .attr("x2", "0") 
    .attr("id", "gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 

gradient 
    .append("stop") 
    .attr("offset", "0") 
    .attr("stop-color", "#ff0") 

gradient 
    .append("stop") 
    .attr("offset", "0.5") 
    .attr("stop-color", "#f00") 

potete vedere una demo qui: http://jsfiddle.net/ZCwrx/