How can I use animate method ?

Ouverte
#338 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

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

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

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de plotly/react-plotly.js

Toutes les issues de plotly/react-plotly.js

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.