web-dev-qa-db-fra.com

produire un graphe "live" avec D3

J'ai récemment commencé à apprendre à utiliser le framework D3.js et, bien qu'il semble avoir été conçu pour faire exactement ce que je veux, je ne trouve pas un exemple simple de graphique de mise à jour "en direct".

Je cherche quelque chose comme un graphique en courbes qui se met à jour au fur et à mesure que de nouvelles données deviennent disponibles. Les nouvelles données seraient obtenues en frappant une URL JSON avec un horodatage "vu en dernier" ou une autre méthode AJAX-y.

edit: La partie D3 de la réponse est la suivante:

http://bost.ocks.org/mike/path/

Maintenant, comment recommande-t-on de transférer les nouvelles données du serveur au client?

d3.js
66
Chris Withers

Ce tutoriel peut vous aider beaucoup à créer un graphe linéaire en temps réel: http://bost.ocks.org/mike/path/

J'aimerais ajouter quelques commentaires supplémentaires:

Données asynchrones

Lorsque vous faites un graphique en temps réel, vous obtenez souvent les données de manière asynchrone, vous ne pouvez donc pas connaître le temps exact entre chaque "point".

  • Pour la ligne, vous avez de la chance car le line décrit dans le tutoriel ne s’inquiète pas de cela.
  • Pour la durée d'avoir un effet de transition en douceur, c'est plus délicat. La clé consiste à définir la durée comme le temps entre la dernière image et la précédente. C'est également une bonne approximation pour le prochain car le réseau a presque toujours le même débit.

Axe Y

Sur un graphique linéaire classique, il est facile de déterminer le domaine y. Cependant, avec les données en direct, la valeur y peut souvent sortir de la limite. C'est pourquoi je recommanderais d'appeler une fonction pour définir le domaine y à chaque itération. Vous pouvez également créer un cadre de sélection.

Performance

Comme les données sont toujours ajoutées, vous voudrez peut-être être très attentif au fait que vous DEVEZ supprimer les valeurs que vous n'utilisez plus, sinon vos données continueront à devenir plus lourdes et toute l'animation risquerait de se bloquer.

34
Christopher Chiche

Peut-être que ce plugin peut aussi être intéressant: Cubisme.

Cubism.js est un plugin D3 permettant de visualiser des séries chronologiques. Utilisez le cubisme pour construire de meilleurs tableaux de bord en temps réel, en extrayant des données de Graphite, Cube et d’autres sources. Le cubisme est disponible sous licence Apache sur GitHub.

modifier:

Un autre projet intéressant peut être Rickshaw, qui exploite également D3.

Boîte à outils JavaScript pour la création de graphiques interactifs en temps réel

Voir cet exemple: données aléatoires dans le futur

27
Fabien Sa

Ce ne sont que deux exemples:

  1. Vous pouvez créer le client pull les nouvelles données du serveur à intervalles réguliers (c'est-à-dire en utilisant certains AJAX appels).
  2. Si le navigateur le prend en charge, vous pouvez ouvrir une prise Web vers le serveur, de sorte que le serveur puisse directement Push nouvelles données dès qu'elles sont disponibles.

Le choix de l’une ou l’autre dépend de nombreuses variables: combien de connexions attendez-vous, quel est le taux de mise à jour des données, quels navigateurs vous envisagez de prendre en charge, etc.

Dans tous les cas, la bibliothèque d3.js n’est pas impliquée dans comment vous obtenez les données, mais dans comment vous les affichez .

15
Marco Leogrande