Question

我经历过口吃＆＃39;使用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。

D3变焦潘口吃

1 个答案: