score:9

Accepted answer

Mistake 1

You are doing:

function zoomed() {
  contaner.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

You should be doing

function zoomed() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Reason the translate/scale should happen to the g DOM(group) which hold the full graph in your case i.e. variable svg.

Mistake 2:

Append a rectangle to the full length and breadth of SVG to capture the zoom events.

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

Working example here

Hope this helps!