Javascript NVD3折线图，具有根据正/负值的颜色渐变

我在nvd3上遇到问题。 我想要的是根据y值进行颜色变化。 大概是这样的：

但是颜色应该随y轴而变化。 示例：如果y轴值为

负片-红色

阳性-绿色

中性-黄色

这是与普通折线图类似的代码

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; });  

我尝试在nvd3折线图js插件文件上实现同样的功能，但失败了

有没有办法在nvd3折线图上实现这一点

---

谢谢

你能分享一下你到目前为止在NVD3上所做的工作吗？我不确定我能不能，它包含了很多文件。（指我的项目）。但是，您是否可以将上述代码插入nvd3的WithFocusChart.js行中。虽然这对于使用nvd3的rCharts来说是有用的。它使线变成虚线。我认为它可以适应你的梯度。@timelyportfolio我已经看过了，它所做的就是把整条线的样式改成虚线。我的要求有点不同，必须使用百分比值设置颜色渐变。不确定是否锁定到

nvd3

。如果不是，酒窝里会不会有这样的东西