Why is my zoom wrong in this d3 code?

Question

This code is running live here: http://domtree.breckyunits.com

The part that is a little off is the zoom behavior. When I zoom in on a point, it zooms correctly but translates to the wrong point. I feel like I need to do some type of transform/translate at the same time, but I'm not quite sure how to understand this stuff. I have very little practice with linear algebra and vectors/matrices.

The part of the code that needs work is the redraw function:

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

You can see all the code at https://github.com/breck7/domtree/blob/master/domtree.js

vis is defined earlier in the code:

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

do not include .call() in your [Object] "vis" for simplifie debug

read this other post : 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());
}