plotly / plotly/react-plotly.js

How can I use animate method ?

Offen
#338 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Es werden keine Repository-Dateien oder Tests genannt. Beginne damit, das bereitgestellte Plotly.animate-Beispiel mit der react-plotly.js-API zu vergleichen und das erwartete Verhalten des Wrappers zu bestimmen; done sollte eine festgelegte, reproduzierbare Möglichkeit sein, Animationen über diese Bibliothek zu verwenden, oder eine dokumentierte Erklärung ihrer Grenzen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.