D3缩放平移卡顿问题

Question

D3缩放平移卡顿问题

d3.js

5

我在使用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()

- Chris Stryczynski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

您可以缩放或拖动元素，但是再对同一元素进行平移。由于平移是相对的，因此会导致卡顿。

正如Zoom行为文档中所述：

该行为会自动创建事件监听器来处理容器元素上的缩放和平移手势。支持鼠标和触摸事件。

与拖拽行为文档相比：

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

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

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

这里是演示。

你可能也对实际缩放感兴趣。要做到这一点，只需将scale添加到transform规则中即可。这里是启用缩放的演示。