d3 v4：剪辑路径在平移和缩放后没有更新

Question

我有一个矩形框，里面有一个剪辑路径，我正在应用到一个组（持有一棵树）。我有一个缩放函数绑定到矩阵转换组，它工作正常。我已经将该剪辑路径应用到该组，并且它首次呈现时看起来应该如此。但是，在平移或缩放后，绘制的树延伸超出剪辑路径的边界，同时保持其以前剪切的外观。

var svg = d3.select(this.$.chart); 
var svg2 = svg.select("svg"); 
var main = svg2.append("g") 
    .attr("class","main") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
var treeContainer = svg2.append('g') 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")") 
var treeBaseRect = treeContainer.append("rect") // the rectangle which holds the clip path and zoom actions for the tree. 
    .attr("width", width + margin2.right) 
    .attr("height", height2) 
    .style("fill", "#eee") 
    .style("pointer-events", "all") 
    .call(d3.zoom().scaleExtent([0.1, 3]).on("zoom", function() { 
     svgGroup.attr("transform", d3.event.transform) 
    })); 
treeContainer.append('defs').append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width + margin2.right) 
    .attr("height", height2); 
var svgGroup = treeContainer.append("g") 
    .attr("clip-path","url(#clip)"); 

下面是一些截图。第一个显示了初始渲染，这是很好的（剪辑区域是暗灰色的矩形）：

然后做一个滚动缩放或平移之后，请注意树如何仍是“原本”发夹，而没有正确修剪灰色区域外：

而且这是在DOM结构我夹路径RECT：

你可以告诉剪辑矩形是仍然在那里的意思是，但树完全无视它。不知道为什么。

Answer 1

显然我没有添加足够的组。最简单的办法是到另一个append("g")添加到我创造svgGroup，对于最后一行看起来像这样：

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