web-dev-qa-db-fra.com

D3 Streamgraph en temps réel (visualisation des données graphiques)

Je voudrais un graphique de flux 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 soient saisies par la droite et que les anciennes données partent par la gauche, de sorte que j'ai toujours une fenêtre de 200 échantillons. Comment pourrais-je procéder de telle sorte que j'aie les transitions appropriées?

J'ai essayé de changer les points de données du tableau a, puis de recréer une zone en tant que telle

  data0 = d3.layout.stack()(a);

mais mes transitions ne donnent pas l'impression que le graphique glisse sur l'écran.

Merci d'avance.

javascriptd3.jsreal-timetransitionstream-graph
20
klyngbaek

Essayez ce tutoriel :

Lors de la mise en œuvre d'affichages en temps réel de données de séries chronologiques, nous utilisons souvent l'axe des x pour coder le temps comme position: au fur et à mesure que le temps avance, de nouvelles données arrivent de la droite et les anciennes données glissent vers la gauche. Si vous utilisez le D3 intégré interpolateurs de chemin , cependant, vous pouvez voir un comportement surprenant ...

Pour éliminer le tremblement, interpolez 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 simplement une partie différente du domaine. En faisant glisser la fenêtre visible au même rythme que les nouvelles données arrivent, nous pouvons afficher de manière transparente les données en temps réel ...

35
mbostock

Voici un exemple simple: http://jsfiddle.net/cqDA9/1/ Il montre 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);
8
Jerm