如何顯示位於可縮放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元素的工具提示？

回答

相關問題