javascript - ドラッグおよびズーム時にd3.jsグリッドが移動する

Question

ここに表示されているグリッドの動作を真似てみました。

私が持っているコードはここにあります

問題は、ドラッグまたはズームしているときに、グリッドが他のすべてのものと一緒に移動するべきではないことです。

問題はこの部分にあると思われます：

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
          svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }

実際、最後の行を削除すると、グリッドは(多かれ少なかれ)正常に動作します。

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
        }

ただし、この場合、視覚化 (線) はもう移動しません。

線とグリッドを正しい方向に動かすにはどうすればよいですか?