D3.js 为什么我在d3代码中的缩放错误？

此代码在此处实时运行：

稍微偏离的部分是缩放行为。当我放大一个点时，它会正确地放大，但转换到错误的点。我觉得我需要同时做一些转换/翻译，但我不太确定如何理解这些东西。我很少练习线性代数和向量/矩阵

代码中需要处理的部分是redraw函数：

var redraw = function () {
  vis.attr("transform", "scale(" + d3.event.scale + "," + d3.event.scale + ") "
    + "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")");
}

您可以在上看到所有代码

vis在代码的前面定义：

vis = d3.select("#body").append("svg:svg")
    .attr("viewBox", "0 0 " + w + " " + h )
    .call(d3.behavior.zoom().on("zoom", redraw))
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

不要在[Object]“vis”中包含.call（），以便简化调试

阅读另一篇帖子：

var vis, zm; // as global !
vis.call(zm=d3.behavior.zoom().on("zoom", draw));
function draw() {
    console.log(zm.scale(), zm.translate());
}