Площадь заполнения для графика в реальном времени

Question

Я реализовал график реального времени с 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); 

Спасибо,

Answer 1

Для того, чтобы переместите область в режиме реального времени, вам придется немного поработать. К счастью, Майк Босток написал очень хороший учебник для path transitions с 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(); 

Также обратите внимание, что вы, безусловно, придется использовать выборы в один момент, чтобы сделать это вы можете посмотреть на следующем уроке: A Bar Chart, Part 2.

Добавьте к этому пример диаграммы области, которую вы уже используете, и вы почти закончили! Единственное отличие состоит в том, что вы пишете

Теперь, вы также можете получить вдохновение на следующий вопрос: Smooth update to x axis in a D3 line chart?

Наконец, here is a jsFiddle, что дает вам рабочий пример того, что вы ищете.