D3 变焦平移卡顿

Question

我遇到 'stutter' D3 拖动行为。

似乎是与"Stuttering" drag when using d3.behavior.drag() and transform

类似的问题

但是该解决方案似乎不适用于缩放行为。

这是问题的示例：（尝试拖动矩形） http://jsfiddle.net/EMNGq/109/

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

var translate_var = [0,0];

zoom_var = d3.behavior.zoom()
  .on("zoom", 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")
    .call(zoom_var);

  g.attr("transform", function(d) { return "translate("+translate_var[0]+","+translate_var[1]+")"; });

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

draw()

Answer 1

您放大或拖动了元素，但随后平移了同一元素。因为翻译是相对的，所以导致这个卡顿。

如 documentation for Zoom Behavior 中所述：

This behavior automatically creates event listeners to handle zooming and panning gestures on a container element. Both mouse and touch events are supported.

对比 documentation for Drag Behavior：

This behavior automatically creates event listeners to handle drag gestures on an element. Both mouse events and touch events are supported.

您的解决方案与类似问题相反。在容器上调用您的缩放功能。

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

这是 demo。

您可能还对实际缩放感兴趣。为此，只需将 scale 添加到 transform 规则中即可。这是 demo with zoom enabled.

D3 变焦平移卡顿

D3 zoom pan stutter

d3.js