D3 streamgraph en temps réel (visualisation de données graphiques) [fermé]
je voudrais un stream graph comme dans cet exemple: http://mbostock.github.com/d3/ex/stream.html
mais je voudrais que les données en temps réel entrent à partir de la droite et que les anciennes données partent à partir de la gauche, de sorte que j'ai toujours une fenêtre de 200 échantillons. Comment ferais-je pour avoir les transitions appropriées?
j'ai essayé de changer les points de données dans le tableau a et puis recréer une zone comme telle
data0 = d3.layout.stack()(a);
mais mes transitions ne donnent pas l'impression que le graphique glisse à travers l'écran.
Merci d'avance.
2 réponses
Essayer ce tutoriel :
lors de la mise en œuvre des affichages en temps réel de données chronologiques, nous utilisons souvent l'axe des abscisses pour coder le temps en position: au fur et à mesure que le temps progresse, les nouvelles données arrivent de la droite, et les anciennes données sortent vers la gauche. Si vous utilisez D3 chemin interpolateurs , cependant, vous pouvez voir un comportement surprenant...
Pour éliminer les wiggle, interpoler la transformation plutôt que le chemin . Cela a du sens si vous pensez que le graphique visualise une fonction-sa valeur ne change pas, nous montrons juste une partie différente du domaine. En faisant glisser la fenêtre visible à la même vitesse que les nouvelles données arrivent, nous pouvons afficher les données en temps réel de façon transparente...
voici un exemple simple: http://jsfiddle.net/cqDA9/1 / Il présente une solution possible pour suivre et mettre à jour les différentes séries de données.
var update = function () {
for (Name in chart.chartSeries) {
chart.chartSeries[Name] = Math.random() * 10;
}
for (Name in chart2.chartSeries) {
chart2.chartSeries[Name] = Math.random() * 10;
}
setTimeout(update, 1000);
}
setTimeout(update, 1000);