javascript — линейный граф в реальном времени с nvd3.js

Линейный график в реальном времени с nvd3.js

Я пытаюсь создать график в реальном времени, используя nvd3.js, который будет периодически обновляться и создается впечатление, что данные обрабатываются в реальном времени.

На данный момент мне удалось создать функцию, которая периодически обновляла бы график, но мне не удалось добиться плавного перехода между «состояниями», такими как линия, выполняющая переход влево.

Вот что я сделал с помощью nvd3.js, вот интересный код:

d3.select('#chart svg') .datum(data) .transition().duration(duration) .call(chart); 

Теперь я смог произвести то, что хочу, используя d3.js, но я бы предпочел использовать все инструменты, предоставляемые nvd3.js. Вот что я хотел бы сделать, используя nvd3

Интересный код для перехода с использованием d3.js:

 function tick() { // update the domains now = new Date(); x.domain([now - (n - 2) * duration, now - duration]); y.domain([0, d3.max(data)]); // push the accumulated count onto the back, and reset the count data.push(Math.random()*10); count = 0; // redraw the line svg.select(".line") .attr("d", line) .attr("transform", null); // slide the x-axis left axis.transition() .duration(duration) .ease("linear") .call(x.axis); // slide the line left path.transition() .duration(duration) .ease("linear") .attr("transform", "translate("   x(now - (n - 1) * duration)   ")") .each("end", tick); // pop the old data point off the front data.shift(); } 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector