D3: zoom to bounding box with d3-tiles

I have successfully layered a D3 (vector) map on top of a d3-tile (raster) map that pulls tiles from Mapbox. The manual zoom works perfectly, and both vector and raster are in sync.

I am now trying to implement the Mike Bostock 'zoom-to-bounding-box' feature, whereby the application zooms on a desired country upon user click. I think I am nearly there, but right now there seems to be a mismatch and the map zooms out into outer space, so to speak.

I have reproduced the issue in this jsfiddle.

What do I need to amend in the 'zoomed' function so that the map zooms correctly and as expected? I think this is where the issue lies:

  vector.selectAll("path")
    .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
    .style("stroke-width", 1 / transform.k);

from D3: zoom to bounding box with d3-tiles