D3 面积图填充线以上

Question

我正在尝试创建一个带有渐变区域填充的 d3 面积图。但是，如果图形数据以 0 以外的任何值开始或结束，则该区域将填充在线上方。这是代码的工作小提琴。https://jsfiddle.net/damamgova/dhLb67mt/var svg = d3.select("#" + id)    .append("svg")    .attr("width", width + margin.left + margin.right)    .attr("height", height + margin.top + margin.bottom)    .append("g")    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");// Get the datadata.forEach(function(d) {    d.date = parseDate(d.date);    d.value = d.value;});var area = d3.svg.area()    .x(function(d) { return x(d.date); })    .y0(height)    .y1(function(d) { return y(d.value); })    // Scale the range of the datax.domain(d3.extent(data, function(d) { return d.date; }));y.domain([0, d3.max(data, function(d) { return d.value; })]);const maxY = d3.max(data, function(d) { return d.value; });// Add the valueline path.svg.append("path")    .attr("class", "line")    .attr("stroke", color)    .attr("stroke-width", 3)    .attr("fill", "url(#gradient)")    .attr("d", valueline(data));// Add Gradientsvg.append("linearGradient")    .attr("id", "gradient")    .attr("gradientUnits", "userSpaceOnUse")    .attr("x1", 0).attr("y1", y(0))    .attr("x2", 0).attr("y2", y(maxY))    .selectAll("stop")    .data([        { offset: "0%", color: "transparent" },        { offset: "50%", color: color + "50" },        { offset: "100%", color: color }    ])    .enter().append("stop")    .attr("offset", function(d) { return d.offset; })    .attr("stop-color", function(d) { return d.color; });// Add the X Axissvg.append("g")    .attr("class", "x axis")    .attr("transform", "translate(0," + height + ")")    .call(xAxis);// Add the Y Axissvg.append("g")    .attr("class", "y axis")    .call(yAxis);

Answer 1

您正在定义area路径生成器，但没有使用它来为您的线路生成路径。

相反，（在您的小提琴中，但不在上面的代码中）您定义了一个名为的行生成器valueline，并使用它来生成路径。

如果有填充，线条生成器将用线条起点关闭线条末端并填充封闭空间，这就是为什么您会看到线条上方的填充。

使用区域生成器，您可以指定y0属性，就您的图表而言，它只是图表的底部。然后输出的路径将沿基线闭合，任何应用的填充都将用于整个区域。

使用区域路径生成器的路径定义很简单：

svg.append("path")

  .attr("class", "line")

  .attr("stroke", color)

  .attr("stroke-width", 3)

  .attr("fill", "url(#gradient)")

  .attr("d", area(data));

但这有一个问题，那就是因为您没有为您的区域使用实心填充，而您正在使用描边，该区域的底部边缘也将被描边。您可以y0在area函数参数的高度上添加几个像素，以便 x 轴覆盖它...

https://jsfiddle.net/qp8xvhaL/