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));但这有一个问题，那就是因为您没有为您的区域使用实心填充，而您正在使用描边，该区域的底部边缘也将被描边。您可以y0在area函数参数的高度上添加几个像素，以便 x 轴覆盖它...https://jsfiddle.net/qp8xvhaL/