如何讓我的區域填充在我的d3折線圖下方作爲漸變？

Question

我正在使用d3 v4。我想創建一個折線圖，其中圖形下方的區域是由從頂部的黑色到底部的光線漸變的區域填充的區域。我認爲這是配置此類梯度

svg.append("linearGradient") 
     .attr("id", "area-gradient") 
     .attr("gradientUnits", "userSpaceOnUse") 
     .attr("x1", 0).attr("y1", y(0)) 
     .attr("x2", 0).attr("y2", y(1000)) 
    .selectAll("stop") 
     .data([ 
      {offset: "0%", color: "navy"}, 
      {offset: "30%", color: "navy"}, 
      {offset: "45%", color: "navy"}, 
      {offset: "55%", color: "navy"}, 
      {offset: "60%", color: "navy"}, 
      {offset: "100%", color: "navy"} 
     ]) 
    .enter().append("stop") 
     .attr("offset", function(d) { return d.offset; }) 
     .attr("stop-color", function(d) { return d.color; }); 

的方式，使用這種風格

.area {       
    fill: url(#area-gradient);     
    stroke-width: 0px;   
} 

但你可以從我的小提琴看 - https://jsfiddle.net/yw46ycse/3/，我有什麼反而是一個堅實的區域。我還需要做些什麼才能讓圖形下方的區域成爲漸變？

Answer 1

這是您尋找解決方案的版本。您可以使用透明作爲停止顏色{offset: "95%", color: "transparent"}。

這是您的小提琴的修改版本，我用它來隨你需要。

https://codepen.io/Nasir_T/pen/OjOWxz

希望這有助於。

Answer 2

幾個問題需要解決：

1. 您有每到一站「水軍」，所以梯度不會顯示
2. 這將是在這種情況下最好不要.attr("gradientUnits", "userSpaceOnUse")。通過使用objectBoundingBox（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientUnits）的默認設置，您可以使用0,0 0,1指定垂直線性漸變。

例如：

svg.append("linearGradient") 
     .attr("id", "area-gradient") 
     .attr("x1", 0).attr("y1", 0) 
     .attr("x2", 0).attr("y2", 1) 
    .selectAll("stop") 
     .data([ 
      {offset: "0%", color: "navy"}, 
      {offset: "100%", color: "red"} 
     ]) 
    .enter().append("stop") 
     .attr("offset", function(d) { return d.offset; }) 
     .attr("stop-color", function(d) { return d.color; }) 

更新小提琴： https://jsfiddle.net/yw46ycse/4/