Javascript 缩放后如何应用d3.js svg剪辑

我正在尝试将svg clippath与d3.js和缩放行为结合使用。 下面的代码创建一个矩形，然后由一个矩形剪裁区域对其进行剪裁

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

var宽度=800；
var高度=600；
var svg=d3。选择（“.chart”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
var clip=svg.append（“defs”）
.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，200）
.attr（“高度”，200）
.attr（“x”，100）
.attr（“y”，100）；
var zoom=d3.behavior.zoom（）。
打开（“缩放”，缩放）；
函数缩放（）{
container.attr（“transform”、“translate”（+d3.event.translate
+）比例（“+d3.event.scale+”）；
container.attr（“剪辑路径”、“url（#剪辑）”）；
}
调用（缩放）；
var container=svg.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）；
var rect=container.append（“rect”）
//.attr（“剪辑路径”、“url（#剪辑）”）
.attr（“类”、“条”）
.attr（“x”，150）
.attr（“y”，150）
.attr（“宽度”，350）
.attr（“高度”，350）；

我想要的是在缩放/移动后再次应用剪辑（因此我无法 将矩形移出剪裁区域，现在我可以毫无问题地完成。）我该怎么做

---

我假设当前的行为是由在转换之前应用剪裁这一事实引起的

我也遇到了同样的问题，在过去的几个小时里，我一直在想办法。显然，剪辑路径在变换之前对对象进行操作。因此，在执行缩放变换时，我尝试对剪辑对象进行反向变换，结果成功了

它的精神是：

var clip_orig_x = 100, clip_orig_y = 100;
function zoomed() {
    var t = d3.event.translate;
    var s = d3.event.scale;

    // standard zoom transformation:
    container.attr("transform", "translate(" + t +")scale(" + s + ")"); 

    // the trick: reverse transform the clip object!
    clip.attr("transform", "scale(" + 1/s + ")")
        .attr("x", clip_orig_x - t[0]) 
        .attr("y", clip_orig_y - t[1]);
}

其中clip是clipPath中的矩形。由于缩放和平移之间的交互作用，您需要显式地设置“x”和“y”，而不是使用变换

---

我相信有经验的d3程序员会想出一个更好的解决方案，但这是可行的

在我之前的回答中，我忘了指出剪辑矩形的原点（假设为0，0），因此它将被关闭100100。是的，这就是我所怀疑的。谢谢你的确认。反向转换解决了这个问题。