使用d3.behavior.drag()和transform时,“Stuttering”拖动

时间:2012-10-25 22:51:49

标签: javascript d3.js

我正在尝试使用d3.js的d3.behavior.drag() drag事件更新我的数据模型(不立即设置元素位置),然后运行我的“绘图”功能来更新所有元素基于更新的模型。另外,我在包含组元素上使用了翻译transform,以便移动与拖动对象相关联的所有元素(我从下面链接的示例中删除了额外的元素)。这会导致被拖动的元素在拖动时断断续续,拖动它的速度越快,效果越差。

请参阅this stripped-down example on jsFiddle

以下是示例的代码:

blocks = [
  { x: 0, y: 0 }
];

drag = d3.behavior.drag()
  .origin(Object)
  .on("drag", function(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    draw();
  });

svg = d3.select("body")
  .append("svg:svg")
  .attr("width", 600)
  .attr("height", 600);

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g");

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100)
    .call(drag);
}

draw()​;

3 个答案:

答案 0 :(得分:35)

您正在drag元素上调用rect,但您正在转换其父级:g元素。

问题是拖动组件使用相对于父级的鼠标位置来确定新的d3.event.xd3.event.y。因此,如果您在用户拖动时移动(即transform)父级,则事情会变得混乱。

解决方法是在您移动的同一元素上调用drag;在这种情况下,g元素:

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g")
    .call(drag);

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100);
}

请参阅更正的小提琴:http://jsfiddle.net/EMNGq/14/

答案 1 :(得分:5)

我和达尔文有同样的问题。拖动处理程序位于附加了D3数据的子对象上,但转换需要应用于父组(而不是d3)。

我通过将origin函数设置为返回x:0,y:0然后在事件中使用x值而不是dx来解决它。

e.g

var drag = d3.behavior.drag()
    .origin(function(d,i) { return {x:0, y:0}; })
    .on("drag", function (d) {  movePosition(d3.event.x);   });

答案 2 :(得分:3)

Nautat为您的案件提供了很好的解决方案。

我的情况稍微复杂一些。我的数据绑定在我要转换的g节点下面。在这种情况下,我不能简单地将.call(拖动)移动到g级别。

我提交了一个拉取请求,以使基本坐标空间可自定义: https://github.com/mbostock/d3/pull/1055