Question

在下面的d3折线图example中，我想填充线条下方的区域，其填充颜色相当于线条颜色，透明度为50％。

除了向CSS添加区域

.area {
  fill: blue;
  opacity: 0.5
}

将以下内容添加到function updateGraph(data)

    svg.append("path")
   .data([data])
   .attr("class", "area")
   .attr("d", area);

和

var area = d3.svg.area()
    .x(function(d) { return x(d.year); })
    .y0(height)
    .y1(function(d) { return y(d.value); });

填充区域需要填充内插线以及填充颜色等于线条颜色需要什么？

Answer 1

实际上，您必须在这些行之前创建新选择。选择（名为states），此处命名为stateArea：

var stateArea = svg.selectAll(".area")
    .data(result, function(d) {
        return d.key
    });

stateArea.enter().append("path")
    .attr("class", "area");

stateArea.transition()
    .style("fill", function(d, i) {
        return d.color = color(d.key);
    })
    .style("opacity", 0.5)
    .attr("id", function(d) {
        return 'tagArea' + d.key.replace(/\s+/g, '');
    })
    .attr("d", function(d) {
        return area(d.values)
    });

stateArea.exit().remove();

以下是更新的bl.ocks：http://bl.ocks.org/anonymous/0c80f4f72247dcc8f590aa2d63d40da0

PS：我只是在这里添加区域，如果你想让左侧的图例改变区域，你必须重构代码。

d3在插值线下填充

1 个答案: