2016-05-16 19 views
1

c3jsでうまくやってみると、見栄えの良いダイナミックチャートが得られました。それをテストしている間に、私は各loadの間の移行が何らかの変化なしに起こっているように見えることに気付きました。私もflow機能を使用しようとしましたが、同じ結果になってしまいました。私はこのトピックだけでは何も見つけることができませんでしたが、基本的にはこの動作を変更し、新しいデータポイントが入ったときにスムーズに移行する方法がありますか?私は新しいメトリックを追加するためにいくつかのデータを削除し始めるまで、私は実際にそれがうまく(水平方向)に動作移行を可能c3jsのダイナミックチャートでスムーズ(水平)に遷移する方法

 transition: { 
      duration: 0 
     }, 

https://jsfiddle.net/g4cq6pg0/1/

、その後、物事は南に行く:あなたがここに私の例を見ることができます

。だけではなく水平に移行することも(350がデフォルト値である)を見て、物事が非常に困難になりた垂直移行:

 transition: { 
      duration: 350 
     }, 

https://jsfiddle.net/g4cq6pg0/2/

どのように私は唯一のスムーズな水平移行を強制することができます?行の移動は、うん

http://bl.ocks.org/simenbrekken/6634070

+0

はc3.jsと遊んだが、d3.js.を持っていますあたかもパスを更新するように見えますが、ノードは期待どおりに遷移します。パスをすぐに変更するのではなく、移行する方法を見つけたのでしょうか? – thatOneGuy

+0

@thatOneGuy私は同意しますが、その達成方法に関するガイダンスは見つかりませんでした。私はc3のupdateメソッドを使用していますが、これは動的データで使用するものです。 –

+0

をd3とすると、c3.jsで何かを見つけることができるかどうかを確認するために、exit()exit()を実装します。 – thatOneGuy

答えて

0

「滑らかさ」の問題を解決するだろう、元の質問への答えの欠如を考えると、私はあきらめ、他のライブラリを使用する:私はhaventはhttp://smoothiecharts.org/

0

が、ポイントは、ちょうどラインで動いていない、現在の値に合うように垂直方向に上下に浮き沈みしている:ここで私が何を意味するかの(唯一のD3を使用)の例であります流れのAPIを使用すると、あなたが求めるものを行うことができますが、その質問者の自身の答えを調整し、(そこに私の答えを参照)重要なバグを持っている>Dynamic timeseries C3js chart

かもしれない - ...

ここで問題を見てください滑らかな水平遷移のためのあなたの最高の賭け

PS。

axis: { 
     y: { 
      max: 1 // translates to 100% on the y axis 
     } 
    } 
+0

私はあなたの提案を試してみて、JSFiddleでそれを理解できませんでした。あなたのリンクを開いて例を見つけましたが、まだアニメーションが滑らかではありません。私は元の質問を編集し、私が意味するものの例を与えました:http://bl.ocks.org/simenbrekken/6634070(C3を使用)。私はD3を今すぐ使うべきではないかと思います。 –

+0

アニメーションは1)2秒ごとに更新されますが、アニメーションは750msだけで変更できますが、2)グラフが水平にアニメートされた後にアニメーションが行われるため実際にはできませんあなたが求めるような連続的なフィード。リアルタイムデータのもう一つの選択肢は滑らかなスプライン効果が欠けていますが、キュービズムですが、d3を書いたのは同じ人です - https://square.github.io/cubism/ – mgraham

0

c3jsが、このために特別に.flow方法があります:あなたはまた、y軸の自動サイズ変更を中止したい場合は、チャートの宣言でこれを必要がありますhttp://c3js.org/samples/api_flow.html

それが起動するので注意してください他のタブに切り替えてしばらくするとフリーズします。

+0

フローを試しましたが、得られませんでしたそれは液体を見て..休止はまだあなたです。私が何かを逃したかどうか分からない? –

+0

早く達成できませんでした。期間のオプション(チャート全体とフロー方法の両方に表示)をデータ更新頻度に近づけるようにしてください。 – AlexGL