javascript - d3.js:ユーザーが画面の端に移動したときにグラフを翻訳するにはどうすればよいですか?

Question

私がこれまでに持っているもの: http://jsfiddle.net/DerNalia/GjmL7/4/

関連コード:

function mouseMove(){
  var x = 0; var y = 1;
   mouse = d3.mouse(this);
   console.log(mouse)
   // check if close to bounds
   if (mouse[x] < 10){
      console.log("shift left")
      circle.attr("cx", function (d,i) { return d.x - 5; } ) // translate x value
      text.attr("cx", function (d,i) { return d.x - 5; } ) // translate x value
      path.attr("cx", function (d,i) { return d.x - 5; } ) // translate x value
   }
   if (mouse[y] < 10){
    console.log("shift right")
      circle.attr("cy", function (d,i) { return d.x - 5; } ) // translate x value
      text.attr("cy", function (d,i) { return d.x - 5; } ) // translate x value
      path.attr("cy", function (d,i) { return d.x - 5; } ) // translate x value
   }
}

現在、画面の端に近づくと、円のノード、線 (パス)、およびテキストがすべて変換されるはずですが、フィドルを確認すると、それらが間違った方向にスクロールすることがわかります。

私が達成しようとしている動作: ユーザーが画面の端までスクロールすると、キャンバス上のすべてがカーソルから離れて移動する必要があります。カーソルは、「ここにあるものを見たい」と言っています。

しかし、問題は (svg 上のすべてを翻訳する方法がわからないことは別として)、カーソルの移動が停止したら、カーソルがドキュメントに戻るまで翻訳を続けるにはどうすればよいかということです。（もちろん、データを超えて翻訳しても意味がないので、翻訳の最大値と最小値を設定します）