D3 区域图在线上方填充

Question

我正在尝试创建一个带有渐变区域填充的 d3 面积图。但是，如果图形数据的开始或结束值不是 0，则该区域会填充在线上方。这是代码的工作 fiddle。

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 路径生成器，但没有使用它来为您的线路生成路径。

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

如果有填充，行生成器 将用行开头关闭行尾并填充封闭的 space，这就是您看到的原因在线上方的填充。

使用区域生成器，您指定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/

D3 区域图在线上方填充

D3 area chart filling above the line

javascript

linechart

d3.js

area-chart