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
   }
}

目前，当你接近屏幕的边缘时，圆形节点，线条（路径）和文本都应该翻译，但是如果你查看小提琴，你会看到它们向错误的方向滚动。 / p>

我正在努力实现的行为： 当用户滚动到屏幕边缘时，画布上的所有内容都应该从光标上移开 - 光标在说，“嘿，我想看看这里有什么”

但问题是（除了不知道如何翻译svg上的所有内容）是，一旦光标停止移动，我该如何继续翻译，直到光标返回到文档？（当然，我会设置翻译的最大值和分钟数，因为翻译数据没有意义）

d3.js：当用户走到屏幕边缘时，如何翻译我的图表？

0 个答案: