css3 - 如何在d3折线图下方填充我的区域以形成渐变？

我正在使用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/中看到的那样，我所拥有的只是一个坚实的区域。为了使图表下方的区域成为渐变，我还需要做什么？

最佳答案

这是您要寻找的解决方案的版本。您可以使用透明色作为终止色{offset: "95%", color: "transparent"}。

这是我用来根据需要制作的小提琴的修改版本。

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

希望这可以帮助。