Linear chart NVD3 with color gradients according to positive / negative values

I am having problems with nvd3. I want to have color variations according to y values. Something like this:

But the color should change with the y-axis. Example: if the y-axis value is

negative - red ,

positive - green

neutral - yellow

This is the code for a similar one for a normal line chart.

CSS

.line {                         
    fill: none;                 
    stroke: url(#line-gradient);    
    stroke-width: 2px;          
}

      

        
        
        
      

    

JS:

svg.append("linearGradient")                
        .attr("id", "line-gradient")            
        .attr("gradientUnits", "userSpaceOnUse")    
        .attr("x1", 0).attr("y1", y(0))         
        .attr("x2", 0).attr("y2", y(1000))      
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "red"},       
            {offset: "40%", color: "red"},  
            {offset: "40%", color: "black"},        
            {offset: "62%", color: "black"},        
            {offset: "62%", color: "lawngreen"},    
            {offset: "100%", color: "lawngreen"}    
        ])                  
    .enter().append("stop")         
        .attr("offset", function(d) { return d.offset; })   
        .attr("stop-color", function(d) { return d.color; });  

      

        
        
        
      

    

I tried to implement the same in nvd3 js diagram plugin files but failed.

Is there a way to achieve this in nvd3 line charts?

thank