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中所述：

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

对比一下documentation for Drag Behavior：

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

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

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

这是demo。

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