Javascript 重置D3缩放平移

我试图在D3中创建一个可拖动的元素，它不会拖动到页面之外。 如本例所示：

换句话说，我不想看到红色矩形后面的背景

为此，我正在检查

zoom.translate（）[0]

是否大于

0

，并手动将其设置为

0

这很好，但问题是当我再次向左拖动时，

zoom.translate（）

x值仍然是原始值，而不是我手动设置的值（除非我在向左拖动之前释放鼠标单击）

有人知道我是如何使

zoom.translate

值保持不变的吗

谢谢

var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 600;
var height = 600;

var zoom = d3.behavior.zoom()
    .scaleExtent([0.5, 10])
    .on("zoom", zoomed);


var svg = d3.select('body').append('svg')
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom);

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

svg.append("g")
    .append("rect")
    .attr("class", "rectangle")
    .attr('width', width)
    .attr('height', height);

function zoomed() {
    console.log('1: ', zoom.translate());
    if (zoom.translate()[0] > 0) {
        //zoom.translate([0, zoom.translate()[1]]);
        //console.log('2: ', zoom.translate());
    }
    svg.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
}