Javascript 实时图形的区域填充

我用javascript和d3.js实现了一个实时图形。数据随机生成，并根据随机数进行更改。我想填充折线图下的区域，但我不知道如何填充，因为数据正在移动！下面的代码对于静态图表是正确的，但是如何将其用于动态移动数据呢

//Css part
.area {
fill: lightsteelblue;
stroke-width: 0;
}
//script 
var area = d3.svg.area()
.x(function(d, i) { return x(i); })
.y0(height)
.y1(function(d, i) { return y(d); });

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

我的数据就是这样生成的：

var n = 100,
    random = d3.random.normal(0, 50),
    data = d3.range(n).map(random);

---

谢谢，

为了实时移动该区域，您需要做大量工作。幸运的是，Mike Bostock为d3.js编写了一个非常好的教程

关键代码是：

// push a new data point onto the back
data.push(random());

// redraw the line, and then slide it to the left
path
    .attr("d", area)
    .attr("transform", null)
    .transition()
    .ease("linear")
    .attr("transform", "translate(" + x(-1) + ")");
// pop the old data point off the front
data.shift();

还请注意，您一定要在某一点上使用选择，为此，您可以查看以下教程：

再加上你已经使用过的面积图的例子，你就快完成了！唯一的区别是你写的

现在，您还可以从以下问题中获得灵感：

---

最后，这为您提供了一个您正在寻找的工作示例

非常感谢您的大力帮助！：）