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

我有一个“可缩放”的SVG矩形，它包含一排较小的矩形。我想显示工具提示这些小矩形但因为该“缩放”矩形下面的代码，我不能在小长方形的悬停显示工具提示：如何显示位于可缩放SVG矩形内的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));

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

P.S. :(缩放最终用于正确看到较小矩形内的文本，因此我决定将它们放在一个更大的矩形中，并对该外部矩形内的所有内容执行缩放。）

来源

2017-08-11 zerotimer

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

来源

2017-08-11 21:23:22 magjac

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

回答

相关问题