D3 缩放+拖动闪烁

Question

我正在尝试在此示例中使用 D3 中的缩放+拖动功能：http://bl.ocks.org/mbostock/6123708

我想使用 svg 和 d3 模拟缩放+拖动图像裁剪。但是，当我拖动它时，它似乎闪烁很多，现在确定如何使它更平滑。另外，如何将其保持在黑色矩形边界内？

链接到jsbin

Answer 1

我也面临同样的问题。当我寻找答案时，我看到了你的答案。尽管我还没有逻辑答案，但我设法解决了我的问题。所以我希望那里的任何大师都可以为我们解释。

基本上我按照本教程没有问题： http://bl.ocks.org/mbostock/3680999

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

然后我意识到最后一个没有最后一个.append("g") 它仍然有效，所以我只在一段时间后删除了这一行，我注意到了这个问题。 （花点时间检查一下本地历史）。

但要回答您的问题，您可能想尝试使用一个“g”进行缩放，而另一个“g”用于所有绘图。