D3缩放平移 [英] D3 zoom pan stutter

问题描述

我遇到了D3拖拽行为的stutter。

I'm experiencing 'stutter' with the D3 drag behavior.

似乎是一个类似的问题，Stuttering使用d3.behavior.drag（）和转换时拖动

Seems to be a similar problem to "Stuttering" drag when using d3.behavior.drag() and transform

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

However the solution does not seem to work for the zoom behavior.

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

Here is an example of the issue: (try dragging the rectangle) 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()

推荐答案

您放大或拖动元素，但然后翻译相同的元素。因为翻译是相对的，所以会导致这种情况。

You zoom in or drag the element, but then translate the same element. Because the translation is relative, it results in this stuttering.

如缩放行为文档：

自动创建事件侦听器以处理容器元素上的缩放和平移手势。支持鼠标和触摸事件。

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

与拖动行为的文档：

此行为自动创建事件监听器处理元素上的拖动手势。支持鼠标事件和触摸事件。

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

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

Your solution is inverse to the similar question. Call your zoom function on the container.

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

这是演示。

您可能还对实际缩放感兴趣。为此，只需将 scale 添加到 transform 规则。以下是启用缩放功能的演示。

You might also be interested in the actual zoom. To do that simply add the scale to your transform rule. Here's the demo with zoom enabled.

这篇关于D3缩放平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！