D3变焦锅结结巴

Question

我在D3拖动行为中遇到“卡顿”现象。

似乎与使用d3.behavior.drag（）和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

放大或拖动元素，然后平移相同的元素。因为平移是相对的，所以会导致口吃。

如“缩放行为 ” 文档中所述：

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

将其与“ 拖动行为 ” 文档进行对比：

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

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

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

这是演示。

您可能还对实际缩放感兴趣。为此，只需在scale您的transform规则中添加即可。这是启用了缩放功能的演示。