Javascript d3 v4：平移和缩放后剪辑路径不更新

我有一个包含剪辑路径的矩形，我将其应用于一个组（包含一棵树）。我有一个绑定到rect的缩放函数，可以转换组，效果很好。我已经将剪辑路径应用于组，当它第一次渲染时，它看起来应该是这样的。但是，在平移或缩放后，绘制的树将延伸到剪辑路径的边界之外，同时保持其先前剪裁的外观

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：

---

您可以看出clip rect仍然是它应该位于的位置，但是树完全忽略了它。不知道为什么。

显然我没有添加足够的组。简单的解决方案是在我创建的svgGroup中添加另一个

append（“g”）

，最后一行如下所示：

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

---

这也帮助解决了我的问题。你知道这是为什么吗？为什么你要在剪短的“g”中再加一个“g”？这对我也很有效。这也解决了我的问题。我有一个没有剪辑的工具提示路径。我只是在剪辑路径和工具提示组之间添加了一个附加组。仅此而已：

svg.append（“g”）.attr（“剪辑路径”、“url（#剪辑）”）。append（“g”）