d3.js - D3变焦平移口吃

Question

我遇到了 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 .