重置D3变焦翻译

Question

我试图在D3中创建一个不会拖动到页面之外的可拖动元素。 就像在这个例子中一样：

http://jsfiddle.net/Lhwpff2r/1/

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() + ")");
}

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

为此，我要检查zoom.translate()[0]是否大于0并手动将其设置为0。

这很好用，但问题是当我再次向左拖动时，zoom.translate() x 值仍然是原始值，而不是我手动设置的值（除非我在向左拖动之前释放鼠标。

有谁知道我如何保持zoom.translate值？

感谢。