Javascript 样条线路径-三维效果

我正在尝试使用d3、svg和css实现（左）样条曲线图，使其具有“3d”效果。使用偏移覆盖两条样条曲线会产生一些接近的结果，但是通过某些数据或缩放，可以看到底部的“阴影”（右）由于插值而不跟随主样条曲线

我尝试过使用渐变，但是这会应用于整个svg区域，而不仅仅是水平路径。代码片段遵循d3的示例（）

//2。使用保证金惯例惯例
var margin={顶部：50，右侧：50，底部：50，左侧：50}
，width=window.innerWidth-margin.left-margin.right//使用窗口的宽度
，height=window.innerHeight-margin.top-margin.bottom；//利用窗户的高度
//数据点的数量
var n=21；
// 5. X标度将使用我们数据的索引
var xScale=d3.scaleLinear（）
.domain（[0，n-1]）//输入
.范围（[0，宽度]；//输出
// 6. Y刻度将使用随机生成的数字
var yScale=d3.scaleLinear（）
.domain（[0，1]）//输入
.范围（[高度，0]）；//输出
// 7. d3线发生器
var line=d3.line（）
.x（函数（d，i）{return xScale（i）；}）//设置线生成器的x值
.y（函数（d）{return yScale（d.y）；}）//为线路生成器设置y值
.curve（d3.curveBasisOpen）//对直线应用平滑
// 8. 长度为N的对象数组。每个对象都有键->值对，键为“y”，值为随机数
VarDataSet=d3.range（n）.map（函数（d）{return{“y”：d3.randomUniform（1）（}}）
// 1. 将SVG添加到页面并使用#2
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
// 3. 调用组标记中的x轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））；//使用d3.axisBottom创建轴组件
// 4. 调用组标记中的y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.call（d3.axisLeft（yScale））；//使用d3.axisLeft创建轴组件
// 9. 追加路径、绑定数据并调用行生成器
追加（“路径”）
.datum（数据集）//10。将数据绑定到行
.attr（“类”、“行”）//为样式指定一个类
.attr（“笔划”、“url（#gradID）”）
//.attr（“笔划”、“红色”）
.attr（“d”，行）；//11调用线路生成器
var defs=svg.append（'defs'）；
常量linearGradient=defs.append（“linearGradient”）；
线性渐变
.attr（“id”、“gradID”）
.attr（“x1”，“0%”）
.attr（“y1”，“0%”）
.attr（“x2”，“0%”）
.attr（“y2”，“100%”）；
线性渐变
.附加（“停止”）
.attr（“偏移量”、“0”）
.attr（“样式”，“停止颜色：蓝色；停止不透明度：1”）；
线性渐变
.附加（“停止”）
.attr（“抵销”、“1”）
.attr（“样式”，“停止颜色：红色；停止不透明度：1”）
.line{
填充：无；
笔画宽度：10；
笔划线头：圆形；
}
谢谢@grantD，该链接能够达到预期效果：

更新的代码段：


//2。使用保证金惯例惯例
var margin={顶部：50，右侧：50，底部：50，左侧：50}，
宽度=window.innerWidth-margin.left-margin.right，//使用窗口的宽度
高度=window.innerHeight-margin.top-margin.bottom；//利用窗户的高度
//数据点的数量
var n=10；
// 5. X标度将使用我们数据的索引
var xScale=d3
.scaleLinear（）
.domain（[0，n-1]）//输入
.范围（[0，宽度]；//输出
// 6. Y刻度将使用随机生成的数字
var yScale=d3
.scaleLinear（）
.domain（[0，1]）//输入
.范围（[高度，0]）；//输出
// 7. d3线发生器
var线=d3
.第（）行
.x（功能（d，i）{
返回xScale（i）；
})//为线路生成器设置x值
.y（功能（d）{
返回y刻度（d.y）；
})//设置线生成器的y值
.曲线（d3.曲线基本开放）；//对直线应用平滑
// 8. 长度为N的对象数组。每个对象都有键->值对，键为“y”，值为随机数
var数据集=d3.range（n）.map（函数（d）{
返回{y:d3.randomUniform（1）（）}；
});
// 1. 将SVG添加到页面并使用#2
var svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var defs=svg.append（“defs”）；
//创建id为#drop shadow的过滤器
//高度=130%，这样阴影就不会被剪裁
var filter=defs.append（“filter”）.attr（“id”，“内部阴影”）；
filter.append（“feOffset”）.attr（“dx”，“0”）.attr（“dy”，“-4”）；
滤波器
.append（“feGaussianBlur”）
.attr（“标准偏差”，“0.2”）
.attr（“结果”、“偏移模糊”）；
滤波器
.append（“feComposite”）
.attr（“操作员”、“输出”）
.attr（“in”，“SourceGraphic”）
.attr（“in2”，“偏移模糊”）
.attr（“结果”、“逆”）；
滤波器
.append（“feFlood”）
.attr（“泛光颜色”、“橙色”）
.attr（“洪水不透明度”，“1”）
.attr（“结果”、“颜色”）；
滤波器
.append（“feComposite”）
.attr（“操作员”、“输入”）
.attr（“in”，“color”）
.attr（“in2”，“逆”）
.attr（“结果”、“阴影”）；
常数comp=滤波器
.append（“feComponentTransfer”）
.attr（“在”、“阴影中”）
.attr（“结果”、“阴影”）；
复合附加（“feFuncA”）.attr（“类型”、“线性”）.attr（“斜率”、“100.10”）；
滤波器
.append（“feComposite”）