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的行生成器，并使用它生成路径。

如果有一个填充，线生成器将关闭线结束与线开始和填充在封闭的空间，这就是为什么你看到填补以上的线。

使用area生成器，您可以指定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/