Ne peut pas rendre les chemins de tirage augmente lentement avec D3
À l'aide de la d3 bibliothèque graphique, je n'arrive pas à faire les chemins de dessiner lentement, de sorte qu'ils peuvent être vu de plus en plus.
Ce site a un parfait exemple de la "Ligne Graphique (Déroulage)", mais aucun code n'est donnée pour cette section. Quelqu'un pourrait-il m'aider avec les lignes de D3 code qui pourrait faire que cela se produise?
Quand j'ai essayer d'ajouter de retard (le) ou la durée() comme dans l'extrait de code suivant, le chemin d'accès attire toujours immédiatement, Et tout le code SVG après ce segment ne parvient pas à rendre.
var mpath = svg.append ('path');
mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48')
.attr ('fill', 'none')
.attr ('stroke', 'blue')
.duration (1000);
Code pour l'exemple: blog.visual.ly/wp-content/uploads/2012/06/les transitions.html#13 ... tant pis, quand je le lance par le biais de jsbeautifier.org on peut voir que la mise en œuvre est idiot
Wow. Trois solutions différentes, mais peut cocher une seule case. Merci nrabinowitz, Duopixel, et btel!
Wow. Trois solutions différentes, mais peut cocher une seule case. Merci nrabinowitz, Duopixel, et btel!
OriginalL'auteur tgoneil | 2012-11-13
Vous devez vous connecter pour publier un commentaire.
Je crois que le "D3 façon de le faire est avec une interpolation personnalisée en fonction. Vous pouvez voir un travail de mise en œuvre ici: http://jsfiddle.net/nrabinowitz/XytnD/
Cela suppose que vous avez un générateur appelé
line
mis en place avecd3.svg.line
pour calculer le chemin:La
pathTween
fonction retourne un interpolateur qui prend une tranche de la ligne définie par la façon dont nous sommes loin de la transition, et les mises à jour de la trajectoire en conséquence.Il convient de noter, cependant, que je soupçonne que vous obtiendrez de meilleures performances et la fluidité de l'animation en prenant la route la plus facile: placez un rectangle blanc (si votre arrière-plan est simple) ou un
clipPath
(si votre fond est complexe) sur la ligne, et la transition vers la droite pour révéler la ligne d'en dessous.Merci, je l'apprécie!
Oui, l'animation d'un rect pour découvrir la ligne sera probablement mieux pour la performance. Simple clip-chemins permettra également de fournir de bonnes performances dans la plupart des cas, ne sait pas si elle serait mieux que de peaufiner le chemin (d'essayer et de voir, de mise en œuvre sera susceptible de varier un peu).
oui, c'est juste l'ajout de la prochaine segment sur un tick-tick. Mais vous pouvez prolonger l'interpolation de la fonction pour ajouter le point suivant qu'une copie de la précédente, puis utilisez
interpolateObject
ouinterpolateArray
d'interpolation le long du segment de chemin (ne fonctionne pas pour d'autres de la ligne de l'interpolation).P. S. Merci pour le conseil sur JSBeautifer. Je peux maintenant voir que le code de la transitions_010.html fichier, et vous avez raison-un malpropre cascade de imbriquée "suivant" clauses.
OriginalL'auteur nrabinowitz
Un modèle commun lors de l'animation de lignes dans le format svg est l'établissement d'un
stroke-dasharray
de la longueur du chemin et puis d'animerstroke-dashoffset
:Vous pouvez voir une démo ici:
http://bl.ocks.org/4063326
Conseil: au lieu de
path.node.getTotalLength()
vous devriez avoirpath.attr('stroke-dashoffset', function() { return this.getTotalLength(); })
Sinon, sipath
est sélectionné sur plusieurs points de données,totalLength
sera uniquement de la longueur de la premièrepath
que vous dessinez. Ultérieurepath
s animent de manière très étrange.+1 serais ravi de voir une version pour
d3.svg.area
.Technique soignée. De ma lecture du code, il n'est pas possible de l'utiliser pour grandir à partir d'un point arbitraire sur le chemin d'accès vers l'extérieur dans les deux sens, non?
Je pense qu'il serait possible que si vous avez animé à la fois
stroke-dasharray
etstroke-dashoffset
mais je ne peux pas comprendre, à partir du haut de ma tête. Je suggère d'ouvrir une nouvelle question.OriginalL'auteur Duopixel
Basée sur le post que vous faites le lien, je suis venu avec l'exemple suivant:
C'est un peu moche, mais qui fonctionne. Vous pouvez le voir sur jsFiddle
OriginalL'auteur btel