Javascript 区域填充不起作用的D3图形

我想让线图中的区域正确填充。（请看图片以查看问题）

请注意已填充的区域和填充下的文本：

代码如下：

.区域{
填充物：淡蓝色；
笔画宽度：0；
}
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var parseTime=d3.timeParse（“%d-%b-%y”）；
var x=d3.scaleTime（）
.范围（[0，宽度]）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var line=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.close）；}）；
d3.tsv（“数据tsv”，功能（d）{
d、 日期=解析时间（d.日期）；
d、 close=+d.close；
返回d；
}，函数（错误，数据）{
如果（错误）抛出错误；
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.close；}）]；
var xAxis=d3.axisBottom（x）
.滴答声（d3.时间年）；
var yAxis=d3.axisRight（y）
.尺寸（宽度）；
var area=d3.area（）
.x0（函数（）{
返回0，宽度；
})
.x1（功能（d）{
返回x（d.日期）；
}).y0（函数（）{
返回高度，高度；
})
.y1（功能（d）{
返回y（d.close）；
});
var valueline=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.close）；}）；
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（customXAxis）；
g、 附加（“g”）
.呼叫（customYAxis）；
函数customXAxis（g）{
g、 调用（xAxis）；
g、 选择（“.domain”）.remove（）；
g、 全选（“.勾选行”）
.attr（“笔划”，“#e9e9e9”）
.attr（“高度”，“510px”）
.attr（“变换”、“平移（0）”、“+-height+”）；
}
函数customYAxis（g）{
g、 呼叫（yAxis）；
g、 选择（“.domain”）.remove（）；
g、 选择全部（“.tick:not（：类型的第一行”）.attr（“stroke”），“#e9e9”）；
g、 选择all（“.tick text”）.attr（“x”，宽度-18）.attr（“dy”，宽度-4）；
}
g、 附加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，1.5）
.attr（“d”，行）；
g、 附加（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域）；
});

对于您的主要问题：

您正在使用线生成器创建面积图-填充生成的路径时，您只需连接第一个点和最后一个点，即图像。发电机如何“知道”填充区域的底部应在哪里？y轴值为零可能是基础的常见值，但它肯定不是通用值。在任何情况下，直线生成器都需要包含缩放y值为0的点以创建正确的填充-除非起点和终点的y值为0，否则这将不是表示数据的准确直线，这就是为什么d3除了直线生成器之外还提供了面积生成器

使用d3.area（）代替d3.line：

.y0方法是可选的，如果未指定，则默认为零，但下面是关于它的文档：

如果指定了y，则将y0访问器设置为指定的函数或 编号并返回此区域生成器。如果未指定y，则返回 当前y0访问器，默认为：

函数y（）{return 0；}

生成区域时，将为每个区域调用y0访问器 输入数据数组中定义的元素，传递给元素d， 索引i和数组数据作为三个参数。有关详细信息，请参见area.x0 更多信息。（）

---

y1方法表示图形的顶部（与折线图中的y访问器相同），y0方法表示底部，在您的情况下，底部是常量。

@Martin很乐意提供帮助。由于您的问题包含多个问题，您可以将其他特定问题（如果它们仍然未解决）作为新问题发布-这样，答案将全部集中在同一个问题上，并且对于希望解决特定问题的未来用户更有用（尽管我确信网格线问题之前已经被问过好几次了，比如这里：）。

var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.close); })   // top of area
    .y0(yScale(0));                           // bottom of area