Estoy usando d3.js para generar un gráfico de área lleno de degradado. Los colores del degradado dependen del valor presentado. El problema es que cuando tres valores uno al lado del otro difieren significativamente, el color medio no aparece. El problema aparece solo en Chrome.

 this.defs.append("linearGradient") .attr("id", 'color-gradient') .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("x2", width) .selectAll("stop") .data(data) .join("stop") .attr("offset", d => { return d.position / width; }) .attr("stop-color", d => { return this.getColor(d.value) }) .attr('stop-opacity', 0.4);

Resultado esperado (en Firefox):

Resultado real en cromo:

¿Cómo puedo arreglar esto? Gracias por su ayuda