D3.js v4单独拖动和缩放/平移

Question

我有一个绘制正方形的代码并绘制一个canvas元素内的点。我使用d3.drag函数拖动与点分开的方块和d3.zoom函数来放大点和方块以及平移两者。我遇到的问题是双重的：

1. 一旦放大，我就失去了拖动方块的能力。从某种意义上说，如果你足够点击（通常是广场的原始点，而不是当前点），你可以再次抓住广场。
2. 一旦我能够再次抓住方块，缩放将渲染到原始缩放图层，而不是当前缩放。

这是jsFiddle

我发现此answer建议添加：

square.on("mousedown", function() { d3.event.stopPropagation(); });

但没有运气。

TIA