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");