3

ここに小さな例を示して、d3.jsの線+面グラフをフォーカス/コンテキストブラッシングおよびパン/ズームと同期させることができました:

http://jsfiddle.net/MtXvx/8/

パンニングを元のドメイン境界で停止するように制限するのに問題がありますが、ブラシでもうまく機能します。これは、ユーザーがビューでグラフを見失うのを防ぐためです。

パンニングが境​​界を超えたことを手動で検出してから、次の例のように zoom.translate([0,0]) を設定しようとしましたが、 d3.js 散布図 - 境界のズーム/ドラッグ、ズーム ボタン、ズームのリセット、中央値の計算 D3.js d3.js 散布図でのズームまたはパン時のドメインの制限 - 境界のズーム/ドラッグ、ズーム ボタン、ズームのリセット、中央値の計算

...ここの 183 行目で行っているように:

 //If exceed original domain, limit panning by resetting translate
if (x.domain()[0] < x0.domain()[0]) {
    zoom.translate([0, 0]);
}

この問題は次の場合に発生します: 1) 小さなコンテキスト グラフにブラシ領域を作成する 2) 大きなフォーカス グラフを最も古い日付に向けて完全にパンする 3) パンニングがほぼ境界にあるときにグラフがジャンプする

ジャンプが発生しないようにするための助けをいただければ幸いです。または、パン (および最終的にはズームアウトも) を元のドメイン境界に制限する他の方法がある場合は、

ズームアウトの制限については、次のように設定します。

var zoom = d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", zoomed);

...ズームアウトがグラフ データの全範囲ではなくブラシ領域に制限されるため、うまく機能しません。

どうもありがとう！

4

2 に答える 2

1

D3 ブラッシングとズーム & パンを組み合わせると同様の問題がありましたが、最終的には解決しました。パンニングを制限する鍵は、ズーム動作オブジェクトの変換をリセットすることであることがわかりました。具体的には、ここに私のズームコールバック関数があります:

function zoomed() {
  var t =   d3.event.translate;
  var s =   d3.event.scale;
  var size = width*s;
  t[0] = Math.min(t[0], 0);
  t[0] = Math.max(t[0], width-size);
  zoom.translate(t);
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  var brushExtent = [x.invert(0), x.invert(width)];
  context.select(".brush").call(brush.extent(brushExtent));
}

あなたの質問の一部ではありませんが、デモ全体を正しく機能させるための重要な部分は、ブラッシングが完了したときにズームの変換とスケールを更新することです。

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  var s = x.domain();
  var s_orig = x2.domain();
  var newS = (s_orig[1]-s_orig[0])/(s[1]-s[0]);
  var t = (s[0]-s_orig[0])/(s_orig[1]-s_orig[0]); 
  var trans = width*newS*t;
  zoom.scale(newS);
  zoom.translate([-trans,0]);
}

以下は、D3 の例の 1 つに基づいた完全な例です: http://bl.ocks.org/sbreslav/be9af0d809b49864b7d8

于 2015-11-30T02:33:10.867 に答える
0

使用できるグラフのパンニングの範囲を制限するためにclamp、そのフィドルでスケールをどこで使用しているか、または使用しているかどうかはわかりませんでした（実際には機能していないようです）。フィドルの簡単な例を次に示します

于 2013-10-05T08:23:57.177 に答える