Javascript 如何删除“；“神经质”；使用d3.behavior.zoom（）平移时

下面是一个演示：

我使用的是

d3.behavior.zoom（）

（它也可以平移）。我只需要平移，而不需要实际缩放。现在，当你拖动树的一部分时，重绘是非常奇怪和“神经质的”（因此，要看到它的演示就是要知道我的意思）。我假设我与click事件存在某种冲突（单击节点会扩展它们）。然而，我看不出问题是什么，更不用说如何解决了。此外，我希望用户能够通过拖动背景来平移，而不仅仅是定位在树的上方

实际上这里有两个问题：

我在zoom实现中犯了什么错误？我该如何着手修复它？及

如何使整个画布“可平移”

缩放行为确定鼠标相对于其附着到的元素的坐标，以查找平移。您已经修改了缩放行为所附加到的元素的位置，以及用于变换的相对坐标。因此，您会看到这种抖动。解决方案是将缩放行为附加到另一个元素，例如SVG本身。这也解决了2

通过将缩放行为附加到SVG元素本身，可以使整个画布成为可拖动的。然后，您只需要修改缩放处理程序，以便在设置转换时考虑边距

要修复抖动并使整个画布可拖动，只需在创建SVG时更改行的顺序：

var svg = d3.select("#map").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .call(pan)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然后，要修复平移偏移，请修改缩放处理程序：

function panned() {
  svg.attr("transform",
     "translate(" + (d3.event.translate[0] + margin.left) + "," +
                    (d3.event.translate[1] + margin.top) + ")");
}

---

完整示例。

与D3版本5不兼容：/