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

enter image description here

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.

20
demandé sur VividD 2012-03-12 13:38:38

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...

35
répondu mbostock 2016-10-05 06:31:07

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);
7
répondu Jerm 2013-12-07 01:28:22