getBBox problem

Trying to get value for the x and y values of an object being moved through d3.zoom.

HTML

<script src="https://github.com/mbostock/d3/raw/master/d3.js"></script>
<div>How do I get the Y value???</div>
<div id="chartdiv">
    <svg id="chart" width="500" height="300">
        <rect x=.5 y=.5 width="499.5" height="299.5" fill-opacity=0 stroke="#000"/>
        <rect id="puck" width="200" height="200" fill="#fff" /> 
    </svg>
</div>
<div id="tracerDiv">Drag the blue box</div>

JavaScript

function redraw() {
    var t = d3.event.translate;
    d3.select("#puck").attr("transform", "translate(" + [t[0], t[1]] + ")");
    
    //The code below is inside the redraw function for convenience, 
    //but in the live code it is elsewhere.
    //I am also adding constraints on the object, 
    //so I can't just use the d3.event.translate object to retrieve my values.
    
    //var bbox = d3.select("#puck").node().getBBox();
    var transf = d3.select("#puck").attr("transform");
    var splitted = transf.split(",");
    var x = ~~splitted [0].split("(")[1];
    var y = ~~splitted [1].split(")")[0];
    console.log(x, y)
    d3.select("#tracerDiv").text(["x:"+x+", y:"+y+" transform:"+transf]);

    //d3.select("#tracerDiv").text(["BBox shows zero: bbox.x:"+bbox.x+", bbox.y:"+bbox.y+" but transform works:"+transf]);
    
    console.log(d3.select("#tracerDiv").text()); 
}


d3.select("#puck").attr("fill", "#00f");
d3.select("#puck").call(d3.behavior.zoom().on("zoom", redraw));
d3.select("#tracerDiv").attr("background-color","#fcf").text= "init";