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 data
data.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 data
x.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 Gradient
svg.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 Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the Y Axis
svg.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));

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

https://jsfiddle.net/qp8xvhaL/