如何显示可缩放 SVG 矩形内的 SVG 元素的工具提示？答案

【问题标题】：How to show tooltip for an SVG element that is inside a zoomable SVG rectangle?如何显示可缩放 SVG 矩形内的 SVG 元素的工具提示？
【发布时间】：2017-08-13 05:02:19
【问题描述】：

我有一个“可缩放”的 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));

如何在较小的矩形上执行鼠标悬停或悬停事件，同时保持缩放行为不变？我需要更改“pointer-events”属性吗？

附：：（缩放最终用于正确查看较小矩形内的文本。因此，我决定将它们放在较大的矩形中，并对外部矩形内的所有内容进行缩放。）

【问题讨论】：

标签： css d3.js svg

【解决方案1】：

较大的矩形“窃取”较小的事件。尝试将缩放行为附加到 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>

【讨论】：