0

我已经用 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);

谢谢,

4

1 回答 1

1

为了实时移动该区域,您将不得不做很多工作。幸运的是,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();

另请注意,您肯定必须在某一时刻使用选择,为此您可以查看以下教程:条形图,第 2 部分

再加上您已经使用的面积图示例,您就快完成了!唯一的区别是你写

现在,您还可以从以下问题中获得灵感:Smooth update to x axis in a D3 line chart?

最后,这是一个 jsFiddle,它为您提供了一个您正在寻找的工作示例。

于 2013-06-27T06:16:15.910 回答