D3 Zoom translateExtent not applied

Question

I'm using D3 v4 to make a responsive barchart. I used this example by Mike Bostock: Brush & Zoom

I want to implement the translateExtent to only translate in x direction but I can't figure out what I'm doing wrong. The g Element jumps to a specific position when I try to drag it.

My code for the setup:

margin = {top: margins.top, right: margins.right, bottom: margins.bottom, left: margins.left};
    width = size.width - margins.left - margins.right;
    height = size.height - margins.top - margins.bottom;

var svg = d3.select("#" + container).append("svg")
    .attr("class", "svgWrapper_" + container);

var cont = svg.append("g")
    .attr('class', 'mainContainer_' + container)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + .margin.bottom);

    svg.call(d3.zoom()
        .translateExtent([[0, 0],[width, height]])
        .on("zoom", function () {
            cont.attr("transform", d3.event.transform)
        }))
        .on("dblclick.zoom", null)
        .on("wheel.zoom", null);

Answer 1

I solved it testing... I didn't get it with the official explication: d3js

But to try it here is the adapted jsfiddle I used to test out the translateExtent: jsfiddle

var zoom = d3.zoom()
.translateExtent([[-300, 0], [600 , height ]])
.on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
  circle.attr("transform", d3.event.transform);
}

I still don't know why the translateExtent in the first jsfiddle didn't work, but I already implemented it in my chart and it works.