web-dev-qa-db-fra.com

Graphique linéaire en temps réel avec nvd3.js

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 périodiquement le graphique mais je n'arrive pas à avoir une transition en douceur entre "états" comme la ligne faisant une transition vers la gauche.

Ici 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);

Maintenant, j'ai pu produire ce que je veux en utilisant d3.js mais je préférerais pouvoir utiliser tous les outils fournis par nvd3.js. Ici est ce que je voudrais produire en utilisant nvd3

Le code intéressant pour la transition 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();

}
javascriptd3.jsreal-timetransitionnvd3.js
36
Christopher Chiche

Vous voudrez probablement regarder: D3 Real-Time streamgraph (Graph Data Visualization) ,

en particulier le lien de la réponse: http://bost.ocks.org/mike/path/

En général, je vois deux façons de traiter le problème de transition verticale:

  • suréchantillonnage ayant une certaine interpolation linéaire entre le point réel et plus l'intervalle entre les points est petit, plus la transition verticale sera "horizontale" (mais l'inconvénient est que vous obtenez beaucoup de "faux" points, qui peuvent être inacceptables selon l'utilisation du graphique)
  • étendez le graphique en ajoutant à la fin et traduisez le graphique sur la gauche, en vous assurant que la partie gauche encore disponible n'est pas affichée jusqu'à ce que vous la supprimiez (en la découpant ou en faisant toute autre astuce), c'est mieux, et la solution mentionnée ci-dessus le fait cette
13
Alexandre Kaspar