Eu estou tentando usar um svg-clippath com d3.js e o comportamento do zoom. O código a seguir cria um retângulo, que será cortado por uma região de recorte retangular.

<svg class="chart"></svg>
<script>

var width = 800;
var height = 600;

var svg = d3.select(".chart")
        .attr("width", width)
        .attr("height", height)
        .append("g");

var clip = svg.append("defs")
    .append("clipPath")
    .attr("id","clip")
    .append("rect")
    .attr("width",200)
    .attr("height",200)
    .attr("x",100)
    .attr("y",100);


var zoom = d3.behavior.zoom().
    on("zoom",zoomed);

function zoomed(){
    container.attr("transform", "translate(" + d3.event.translate
    +")scale(" + d3.event.scale + ")");
    container.attr("clip-path","url(#clip)");
}

    svg.call(zoom);

var container = svg.append("g")
    .attr("clip-path","url(#clip)");

var rect = container.append("rect")
    //.attr("clip-path","url(#clip)")
    .attr("class","bar")
    .attr("x",150)
    .attr("y",150)
    .attr("width",350)
    .attr("height",350);

</script>

O que eu quero é que o recorte seja aplicado novamente após o zoom / movimento (para que eu não possa mover o retângulo para fora da região de recorte, o que agora eu posso fazer sem problemas.) Como faço isso?

Estou assumindo que o comportamento atual é causado pelo fato de o recorte ser aplicado antes da transformação.