为什么我在这个 d3 代码中的缩放错误？

Question

此代码在此处实时运行：http://domtree.breckyunits.com

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

需要工作的部分代码是重绘函数：

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

您可以在https://github.com/breck7/domtree/blob/master/domtree.js查看所有代码

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] + ")");

Answer 1

不要在 [Object] "vis" 中包含 .call() 以简化调试

阅读其他帖子： d3.js zoom xScale / xAxis

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