4

d3.jsのzoom（）機能に接続したいグラフのペアがあります。d3.js API wikiを調べましたが、zoom（）機能のドキュメントはまだありません。基本的に、ユーザーがどちらか一方をズームまたはドラッグしたときに、両方のグラフを更新する必要があります。2つの異なるグラフにズーム動作を適用する方法がわかりません。

積み上げグラフの実例のJSFiddleを作成しましたが、ズーム機能は上のグラフでのみ機能します：http: //jsfiddle.net/G6GPm/2/

どちらかを変更したときに、ズームとドラッグを両方のグラフに適用したいと思います。私はzoom（）の振る舞いの呼び出しを変更する必要があることを知っています：

rect.call(d3.behavior.zoom().x(x).on("zoom", zoom));

この動作はx（x）軸に適用されていることがわかりますが、下のグラフのx（x_sta）軸にも適用する必要があります。

私はzoom（）関数を分割しようとしましたが、APIドキュメントがないので、何が必要かを推測しています。

rect.call(d3.behavior.zoom()
  .x(x).on("zoom", zoom)
  .x(x_sta).on("zoom", zoom)
);

これは明らかに失敗します。複数のグラフを使用したd3.jsの相互作用の他の例を見てきましたが、これとまったく同じものはありません（独自の軸とデータなどを持つ2つの異なるグラフ）。

前もって感謝します。

4

2 に答える 2

3

グラフが同じサイズではない場合にこれを行う可能性がある他の人にとっては、答えはより複雑になる可能性があり、それが発生したときにその質問に答えます。しかし、幸いなことに、答えは簡単です...

...両方のグラフに同じX軸を使用してください！ここで修正しました。

http://jsfiddle.net/G6GPm/11/

別の提案：JavaScriptでスタイルを設定するのではなく、CSSを優先します。JSはattrにのみ使用してください。

于 2012-09-26T05:48:30.507 に答える
1

ズーム動作には、設定可能な.translate属性と.scale属性があります。解決策は、おおまかに次のようになります。

var zoomCallback = function() {
  // do stuff
  zoom1.scale(d3.event.scale).translate(d3.event.translate);
  zoom2.scale(d3.event.scale).translate(d3.event.translate);  
}

var zoom1 = d3.behavior.zoom().x(x).on("zoom", zoomCallback);
var zoom2 = d3.behavior.zoom().x(x_sta).on("zoom", zoomCallback);

rect1.call(zoom1);
rect2.call(zoom2);
于 2013-01-22T20:12:43.713 に答える