Javascript 如何在d3和SVG中创建着色路径？

我正在创建一个带有阴影效果的图表，并希望有一个效果类似于苹果健康套件的线条图，除了在最后一个数据点后没有尖锐的垂直线。本质上，我想要在一条线的形状下进行着色，就像一个非常模糊的阴影。如何在d3中实现这一点？

除了图形线之外，您还需要创建一个多边形，并将其放置在线条后面。给那个多边形一个线性渐变。渐变色为白色，顶部为半透明，底部为完全透明

下面是演示。我让你把它转换成d3

谢谢！基本策略很好，但我的核心问题是如何软化多边形左右两侧的垂直线。最好的方法是什么？你可以给元素添加一个模糊过滤器，标准偏差很小。光靠它自己是不行的。您需要遮罩图形线上方的区域，否则模糊将在您不需要的地方可见。谢谢。这正是我要找的。