How do I get my area filled beneath my d3 line chart to be a gradient?

Question

I'm using d3 v4. I would like to create a line chart where the area beneath the graph is an area filled by a gradient going from dark at the top to light at the bottom. I thought this was the way to configure such a gradient

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

and using this style

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

but as you can see from my Fiddle -- https://jsfiddle.net/yw46ycse/3/, what I have instead is a solid area. What else do I need to do to get the area beneath the graph to be a gradient?

How do I get my area filled beneath my d3 line chart to be a gradient?

2 Answers