1

我正在尝试创建一个带有渐变区域填充的 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);
4

1 回答 1

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/

于 2019-10-08T15:08:43.027 回答