Javascript D3缩放平移范围未应用

我用D3V4制作了一个反应灵敏的柱状图。我使用了Mike Bostock的例子：

我想实现translateExtent，只在x方向上进行翻译，但我不知道我做错了什么。当我尝试拖动g元素时，它会跳到一个特定的位置

我的设置代码：

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);

---

我通过测试解决了它。。。我不明白官方的解释：

但这里要尝试的是我用来测试translateExtent的经过修改的JSFIDLE：

---

我仍然不知道为什么第一个JSIDLE中的translateExtent不起作用，但我已经在我的图表中实现了它，并且它起作用了。

你能提供JSIDLE中的代码来检查吗？这是一个简化的版本。我想我只是不明白它是怎么工作的。。。

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

svg.call(zoom);

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