D3.js – transform & transition, plusieurs lignes

J'ai suivi les instructions à l' adresse suivante : http://bost.ocks.org/mike/path/ pour créer et animer des graphiques simples avec des lignes simples.

Et, a compris comment créer plusieurs lignes dans un graphique: Dessiner plusieurs lignes dans D3.js

Problème principal: j'ai de la difficulté à passer de plusieurs lignes après que je change et que je lance de nouvelles données dans mon tableau de données.

Je crée les lignes N avec: (time: epoch time, steps forward)

• Est-il possible de définir des attributs personnalisés d'objets SVG en tant que nombre et non comme chaîne?
• Test de l'événement Mouseover D3 avec Sinon
• Sélectionnez le nœud d3 par sa donnée
• Supprime toujours un événement de clic après la mise en page d3
• Changer la taille de la bulle dans Scatter Plot pour c3.js

var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...], [{time:1335972631000, value:45}, {time:1335972631500, value:13},...], [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}], [...],[...],... ]; var seriesColors = ['red', 'green', 'blue',...]; line = d3.svg.line() .interpolate(interpolation) .x(function(d) { return x(d.time); }) .y(function(d) { return y(d.value); }); graphGroup.selectAll(".line") .data(seriesData) .enter().append("path") .attr("class", "line") .attr("d", line) .style('stroke', function(d, i) { return seriesColors[i]; }) .style('stroke-width', 1) .style('fill', 'none'); 

Et j'essaie de mettre à jour N lignes avec un setInterval Javascript (…) appelant une méthode avec:

 graph.selectAll("path") .data(seriesData) .attr("transform", "translate(" + x(1) + ")") .attr("d", line) .transition() .ease("linear") .duration(transitionDelay) .attr("transform", "translate(" + x(0) + ")"); 

Il peut dessiner parfaitement l'ensemble initial, mais dès que je met à jour le tableau de données, les lignes disparaissent.

MISE À JOUR 01

Je me suis rendu compte que j'utilise les valeurs de temps d'époque dans le x (xAxis montre la date: l'heure), car mon exemple fonctionnerait probablement si j'utilisais les séries illustrées ci-dessus.

Le problème était la «transformation», «traduire» en utilisant x (1), x (0) renvoyait des nombres énormes, beaucoup plus grand que mon graphique devait être transitionné.

J'ai modifié la méthode des lignes N de mise à jour (ci-dessus) pour utiliser une approche manuelle:

Nouveau problème: maintenant, le graphique se déplace correctement à gauche, mais les lignes / graphique s'affichent à droite, chaque mise en fonction de la mise à jour de l'interface est exécutée.

Il est poussé / décalé le tableau sérieData correctement, mais il ne continue pas à faire défiler vers la gauche pour afficher les nouvelles données qui sont effectivement dessinées.

 graph.selectAll("path") .data(seriesData) .attr("d", line) .attr("transform", null) .transition() .ease("linear") .duration(2000) .attr("transform", "translate(-200)"); 

Une autre référence que j'ai utilisée est la suivante: http://bl.ocks.org/1148374

Des pensées?

• Possibilité d'utiliser une configuration de cercle dans d3.js avec une taille de cercle fixe?
• D3.js: comment utiliser la fonction de carte?
• Définir un problème d'identification dans d3
• Création de plus d'un tableau pour le jeu de données
• Étiquette / barre courbée hybride d3.js, diagramme circulaire

 .data(seriesData) 

 .data([seriesData])