Cómo usar degradados SVG para mostrar colores variables en relación con el tamaño de la región de color

Question

Estoy usando SVG y D3 para crear gráficos de barras y tengo una pregunta sobre cómo colorearlos. He buscado muchas preguntas en este sitio y en otros, y aún no he encontrado a nadie con el mismo problema.

Me gustaría que cada barra comience en la parte inferior con un color (amarillo, por ejemplo) y, a medida que la barra se hace más alta, mezcle progresivamente más del segundo color (rojo, por ejemplo), para que las barras a su altura potencial máxima sería solo el segundo color. En este ejemplo, las partes superiores de las barras que tienen la mitad de su altura potencial serían de color naranja.

Pude escribir una función para producir, para una barra de cualquier altura determinada, un degradado lineal único que colorearía las barras según lo deseado.

Sin embargo, dado que este gráfico es dinámico y las alturas de las barras pueden cambiar muchas veces por segundo a medida que se actualizan, la creación y aplicación de un nuevo degradado cada vez y para cada barra definitivamente no es eficiente y podría dar como resultado lag en refrescar los bares. (Admito que no he probado esto con otra cosa que no sea un caso de prueba estático, por lo que podría estar equivocado sobre esa última suposición.)

El uso de un gradiente estático da como resultado algo como esto, donde los colores se mezclan de acuerdo con la altura de la barra, no la altura de la región:

En mi escenario deseado, sin embargo, las barras más pequeñas deben tener muy poco de color rojo o azul oscuro, respectivamente.

Mi pregunta, por último, es la siguiente: ¿hay una manera de

1. crear un gradiente único que se aplica a la propia región SVG (fácil)
2. han dicho gradiente de enmascarado de alguna manera (fácil)
3. luego se desenmascaró selectivamente debajo de los rectángulos que representan las barras del gráfico? (??? )

O, ¿hay alguna otra técnica estoy pasando por alto?

Gracias

Answer 1

Esto es fácil de implementar, pero un poco difícil de entender, es preciso especificar que las unidades de gradiente son userSpaceOnUse y luego definir la región en la que desea que se aplique a través 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") 

se puede ver una demo aquí: http://jsfiddle.net/ZCwrx/