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/