パン/ズーム順序尺度？

Question

d3を使用して、d3.behavior.zoomを使用してパンとズームを使用して簡略化されたガントチャートをレンダリングしています。

xスケールは時間スケールです（カラムなどの中で暦の中心日に若干変更されています）。うまく動作しますが、ドメインがタスクのリストであるyスケールをズーム/パンする方法を決定する際に問題がありますそれはしばしば、グラフ領域に収まるほど多すぎるので、パン/ズームの必要性があります。

ズーム/パンイベントに反応するようにデフォルトの順序スケールを指定する方法はありますか、カスタムスケールを書き込むべきですか？カスタムスケールを記述する必要がある場合は、d3.scale.ordinal（タスクのリスト全体を格納し、可視サブセットのみをドメインとして使用する）、またはd3.scaleに基底を置く方がよいでしょう。線形（そして、レンジバンド等の序数に似たものを実装します）。

私が紛失しているものがありますか（それはd3を使用した私の最初のプロジェクトである可能性があります）？

Answer 1

私は個人的に連絡を取ったため、私がこれをどうやって説明したか

まずは、さまざまなソース（PowerPointファイル、企業データベースなど）から集められた計画データを集約して表示する問題のアプリのスクリーンショットです。

関連するビットは、各ドットは、プロジェクトの努力と関係する組織を表し色のドット、右側の縦軸です。軸上の灰色の領域はd3.jsブラシで、チャート/テーブルのデータをリアルタイムで変更するためにパン/リサイズが可能です。

• が
• 私のデータ配列のインデックスに
• スライス私のデータ配列を、それを転置し、その結果を設定するブラシ範囲を得る：ハンドラ内で何が起こる

  // the axis is a regular ordinal axis, with a brush 
  y2 = d3.scale.ordinal(), 
  brush = d3.svg.brush().y(y2).on('brush', brushReact), 
  // [...] 
  // brush event handler 
  function brushReact() { 
      if (tasksSlice == null) 
       return; 
      var yrb = y2.rangeBand(), 
       extent = brush.extent(), 
       s0 = Math.round(extent[0]/yrb), 
       s1 = Math.round(extent[1]/yrb); 
      if (s0 == tasksSlice[0] && s1 == tasksSlice[1]) 
       return; 
      tasksSlice = [s0, s1]; 
      inner.refresh(); 
  } 
  

  は非常に簡単です表示するデータ

• グラフと表を更新する

私はこれがそれをクリアすることを望む。

Answer 2

それは難しい、私は持っていないですが判明：それは、ドメイン値の全範囲を格納し、（スライスを実装した以外は

• は、d3.scale.ordinalするほとんど同じで、カスタムスケールを書きます[最小、最大]）可視ドメイン値の範囲を設定するメソッド
• ズームイベントコールバックのy変換デルタを追跡し、合計yの変換を格納する変数に追加します
• 総変換量が> = 2つの範囲値の間のyデルタよりも、（可視または不可視の）ドメインのいずれかにまだ存在していないことを確認する場合（0または長さ）、スライスインデックスを1ずつインクリメントまたはデクリメントしない場合は、合計変換変数をリセットして軸を再描画します。