Css 如何使d3折线图下方的区域填充为渐变？

我用的是D3V4。我想创建一个折线图，图下面的区域是一个由渐变填充的区域，从顶部的黑暗到底部的光明。我以为这就是配置这种渐变的方法

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

---

但正如你从我的小提琴上看到的-，我得到的是一个坚实的区域。我还需要做什么才能使图形下方的区域成为渐变？

需要解决的几个问题：

你的每一站都有“海军蓝”，所以梯度不会显示出来

在这种情况下，最好不要

.attr（“gradientUnits”、“userSpaceOnUse”）

。通过使用objectBoundingBox（）的默认设置，您可以仅使用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; })

更新小提琴：

---

这是您正在寻找的解决方案的版本吗。您可以使用透明作为停止颜色

{offset:“95%”，color:“transparent”}

这是你的小提琴的一个修改版本，我用它来做你需要的

---

希望这能有所帮助。

谢谢您的更新。我想要的是一个渐变，从海军开始，然后逐渐变为零（透明）。我会用“透明”来代替“红色”吗？我试着用你小提琴上的“不透光”来代替“不透光的颜色”，但这会给我留下一个完全黑色的区域，没有任何渐变。如果我是一个CSS的家伙，我可能会更清楚如何处理它。可能值得再问一个这样的问题，或者改变这个。我想你需要的颜色和不透明度为每一站你能不能指定颜色不透明度与“rgba（0,0128,0）”？喜欢（

rgb（0,0128）

是海军）。然后，你可以按照你想要的方式来调节锥度。