我有一个"可缩放"的SVG矩形，其中包含一排较小的矩形。我想显示这些较小矩形的工具提示，但由于"可缩放"矩形的以下代码，我无法将鼠标悬停在较小的矩形上以显示工具提示：
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1 / 8, 4])
.on("zoom", zoomed));
如何在保持缩放行为不变的情况下，在较小的矩形上执行鼠标悬停或悬停事件？我需要更改"指针事件"属性吗？
PS ：(缩放最终用于正确查看较小矩形内的文本。因此，我决定将它们放在一个更大的矩形中，并对该外部矩形内的所有内容执行缩放。
较大的矩形从较小的矩形"窃取"事件。尝试改为将缩放行为附加到 SVG。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<div id="parent" style="text-align: center;"></div>
<script>
function zoomed() {
g.attr('transform', d3.event.transform);
}
var svg = d3.select("div").append("svg")
.attr("width", 800)
.attr("height", 500);
var g = svg.append("g");
var zoomBehavior = d3.zoom()
.scaleExtent([1 / 8, 4])
.on("zoom", zoomed);
svg.call(zoomBehavior);
var largeRect = g.append("rect")
.attr("width", 200)
.attr("height", 200)
.style("fill", "#d62728")
.style("pointer-events", "all");
largeRect.append("title")
.text("large");
var smallRect = g.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 100)
.attr("height", 100)
.style("fill", "#1f77b4");
smallRect.append("title")
.text("small");
</script>