0

ドラッグ、ズーム、更新を使用してグラフを作成しています。これはほとんど機能しますが、新しいデータを追加した後、ドラッグ位置は更新されません。

再現する手順：

  • デモを見る
  • グラフにデータが追加されるまで数秒待ちます
  • 次に、グラフを左または右にドラッグしてみてください
  • グラフは最初にプッシュバックされ、その時点からドラッグは正常に機能します

したがって、新しいデータを追加するときは、どういうわけかドラッグの原点を更新する必要があると思います。しかし、どのように？これまでのところ、その例を見つけることができませんでした。D3のドラッグ機能のコードも調べましたが、それでもわかりません。ズームについても同じことが起こります。同じ問題だと思います。

コードとデモはここで見ることができます：http： //jsbin.com/irixag/1/edit

編集：私が何を意味するのかはっきりしない場合は、質問を言い換えることができるように教えてください。

4

1 に答える 1

1

さて、私はあなたのコードと d3.js ソースをふるいにかけましたが、いくつかのことに気付きました.

まず、私の解決策の要点は追加することです

function update() {
    ...
    if (shiftRight) {
        zoom.x(x); // You're missing this line
        ...
    }
    ...
}

理由は次のとおりです。

.x(x)オブジェクトの呼び出しを使用して、水平方向のドラッグ アンド ドロップを初期化していd3.behavior.zoom()ます。これは問題ないように見えますが、このドラッグ アンド ドロップ ハンドラはさまざまなオリジン用に設計されていません。

基本的に、呼び出すときは、現在の値が原点でd3.behavior.zoom().x(x)あることを宣言しています。現在、d3.js はこの値を保存しているため、アニメーション ループでウィンドウを右にシフトしても、ドラッグ アンド ドロップは元の原点を尊重します。x

ソースには、d3.behavior.zoom対象となる 3 つの変数x0、x1、および がありtranslateます。x1は、渡された変数の現在の値への参照です。 は、最初にx変数を渡したときx0にコピーされた値です。は、結合されたすべてのドラッグ アンド ドロップの集約された翻訳です。xtranslate

便利なことに、呼び出すzoom.x(x)とこれら 3 つの変数がすべてリセットされます。つまり、移動は現在の原点に対してのみ集計され、原点にはシフト ウィンドウが反映されます。

于 2013-03-11T04:56:10.653 に答える