J'essaie de créer un graphique en temps réel en utilisant nvd3.js qui serait mis à jour périodiquement et avec l'impression que les données sont traitées en temps réel.
Pour l'instant, j'ai pu créer une fonction qui mettrait à jour le graphique périodiquement, mais je n'arrive pas à avoir une transition douce entre les "états", comme la ligne qui fait une transition vers la gauche.
Aquí C'est ce que j'ai fait en utilisant nvd3.js, voici le code intéressant :
d3.select('#chart svg')
.datum(data)
.transition().duration(duration)
.call(chart);J'ai pu produire ce que je voulais en utilisant d3.js mais je préférerais pouvoir utiliser tous les outils fournis par nvd3.js. Aquí voici ce que je voudrais produire en utilisant nvd3
Le code intéressant pour la transition en utilisant d3.js est :
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();
}
