How can I use animate method ?
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Accessibilité débutants
- 25/100
- Type d'issue
- Fonctionnalité
- Clarté
- À clarifier
- Activité
- À l'abandon
- Stack technique
- javascript, react
- Domaine
- data-visualization, frontend
Piste de recherche
Aucun fichier ni test du dépôt n’est mentionné. Commencez par comparer l’exemple fourni de Plotly.animate avec l’API de react-plotly.js et déterminez le comportement attendu du wrapper ; done devrait être une manière définie et reproductible d’utiliser l’animation via cette bibliothèque, ou une explication documentée de ses limites.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
Plotly.animate("myDiv", { data: finalData }, { ...animationConfig });
Plotly.animate can be used with some css transtion effects, but there is no such method in react-plotly.js, how can I use this method ?thank you!
Here is a demo use animate
const animationConfig = {
transition: {
duration: 1000,
easing: "cubic-in-out"
},
frame: {
duration: 1000
}
};
// Initial Plot for Animation
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const initialData = [
{
x: numbers,
y: [0, 0, 0, 0, 0, 0, 0, 0, 0],
name: "square",
type: "bar"
},
{
x: numbers,
y: [0, 0, 0, 0, 0, 0, 0, 0, 0],
name: "cube",
type: "bar"
}
];
Plotly.newPlot("myDiv", initialData);
// Final Plot with Animation
const squares = numbers.map((x) => x * x);
const cubes = numbers.map((x) => x * x * x);
const trace1 = {
x: numbers,
y: squares,
name: "square",
type: "bar"
};
const trace2 = { x: numbers, y: cubes, name: "cube", type: "bar" };
const finalData = [trace1, trace2];
Plotly.animate("myDiv", { data: finalData }, { ...animationConfig });
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Merge moyen
- 3 j 2 h
- PR mergées (30 j)
- 4
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Difficulté 3/5 1-2 jours Accessibilité débutants 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Difficulté 3/5 1-2 jours Accessibilité débutants 65/100
plotly/react-plotly.js#380 · 7 commentaires ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 48/100
plotly/react-plotly.js#358 · 1 commentaire ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
plotly/react-plotly.js#354 ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 30/100
plotly/react-plotly.js#353 · 1 commentaire ·