plotly / plotly/react-plotly.js

How can I use animate method ?

オープン
#338 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
JavaScript
スター
1.1k
フォーク
138
平均マージ
3日 2時間
マージ済み PR(30日)
4

説明

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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リポジトリのファイルやテストは指定されていません。まず、提供された Plotly.animate の例を react-plotly.js API と比較し、wrapper に期待される動作を判断してください。done は、このライブラリを通じてアニメーションを使用するための、決定済みで再現可能な方法、またはその制限に関する文書化された説明であるべきです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
data-visualization, frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。