相对于轴的D3颜色渐变

Question

我已经在D3中构建了上述多条折线图。每条线都绘制为一系列线段，因此我可以根据数据更改每个线段的属性。我还能够使用线性渐变将颜色渐变应用于每个线段。

问题是我希望颜色渐变相对于x轴，以便该行小于0时，在x轴上与0交叉的任何段都是红色，而当该行大于0时，则为绿色。现在，将每个线段装箱，并且将梯度分布分别应用于每个线段，而不是相对于轴。如何获得线性渐变以所需的方式表现？

var linearGradient = svg.append("defs")
      .append("linearGradient")
      .attr("id", "linear-gradient");

    linearGradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#d7191c");

    linearGradient.append("stop")
      .attr("offset", "50%")
      .attr("stop-color", "#ff8080");

    linearGradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#1a9641");

var randomnumner = Math.floor(Math.random() * 10) + 1;
          payer.selectAll("link")
          .data(function(d){return d.values})
          .enter()
          .append('path')
          .attr("d", function(d) {return curvedline(d); })
          .style("stroke", function(d) { if((d.prev_x>0 && d.percent_change<0) || (d.prev_x<0 && d.percent_change>0)) {
                return 'url(#linear-gradient)';
              } else { 
                return '#cccccc';
              } 
            })
          .attr("fill", "none")
          .attr("stroke-width", function(d) {return d.payer_volume});