为什么我的缩放错误在这个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缩放xScale/xAxis

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