javascript - D3.js:ズームの例を折れ線グラフで動作するように適応させますか?

Question

D3.js リポジトリの「ズーム」の例を、折れ線グラフで動作するように適応させようとしています。元の実際のズームの例はここにあります。小さいグラフの領域を選択するだけで、大きいグラフをズームできます。

良い！私の折れ線グラフの適応 ( D3 にも同梱されている「折れ線」の例からの作業) はここにありますが、完全には機能していません。ご覧のとおり、小さいグラフをクリックすると、大きいグラフの x 軸は正しくズームされますが、線はズームされません。

問題は line.html ソースにあると思います:

focus.select("path").attr("d", area);

それはおそらく

focus.select("path").attr("d", line);

しかし、それは役に立ちません。context基本的に、からの改訂されたデータがの行を実際にどのように更新するかは完全にはわかりませんfocus。私が間違っていることを誰か説明してください。

簡単にするために、ここで jsfiddle を作成しました: http://jsfiddle.net/MYWRS/4/

score 1 · Accepted Answer

変更

focus.select("path").attr("d", area);

に

focus.selectAll("path").attr("d", line);

行の更新が表示されます。これは必要な作業の一部にすぎません。ご覧のとおり、ポイントは更新されておらず、線は正しくクリップされていません。

私の提案は、現在持っているものをリファクタリングし、表示する範囲を引数として取る関数で線と点を作成する呼び出しをラップすることです。現在のコードでは、線を描画するコードが実際にはデータや範囲を明示的に取得しないため、正しい機能を実現するのが難しくなります。

また、必要なすべての機能を既に提供している可能性があるdygraphsも参照してください。

1 に答える 1