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：

你可以看出剪辑rect仍然是它的意思，但树完全忽略了它。不知道为什么。

Answer 1

显然我没有添加足够的群组。简单的解决方案是将另一个append("g")添加到我正在创建的svgGroup中，最后一行看起来像这样：

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