javascript - "Stuttering"使用 d3.behavior.drag() 和变换时拖动

Question

我正在尝试使用 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()​;

Answer 1

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

问题是拖动组件使用鼠标相对于父级的位置来确定新的d3.event.x和 d3.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);
}

请参阅更正的 fiddle : http://jsfiddle.net/EMNGq/14/