D3在插值线下填充

Question

在下面的D3线图示例中，我想填充线条下的区域，填充颜色等于线色，透明度为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

实际上，您必须在行'选择之前创建一个 new 选择(命名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/0c80f4f72247dcc8f590aa2d63d63d40da0

ps：我只是在这里附加附加区域，如果您希望那个传奇也要在左边更改区域。