如何将工具提示添加到SVG图形？如何将工具提示添加到SVG图形？(How to add a tool

我有一系列（使用D3.js）SVG矩形和我想显示在鼠标悬停的消息，该消息应该由一个框充当背景包围。它们都应该完全对齐，彼此于矩形（在顶部和居中）。做这个的最好方式是什么？

我尝试添加使用的“x”的SVG文本，“Y”，“宽度”和“高度”属性，然后在前面加上一个SVG矩形。问题是，文本的参考点是在中间（因为我希望它居中对齐我使用text-anchor: middle ），但对于矩形它的左上角坐标，再加上我想有点缘周围的文本这使得那种一件很痛苦的。

另一种选择是使用HTML DIV，这将是很好的，因为我可以直接添加文本和填充，但我不知道如何获得每个矩形的绝对坐标。有没有办法做到这一点？

Answer 1:

您可以使用标题元素作为Phrogz表示。也有像jQuery的醉意一些很好的提示http://onehackoranother.com/projects/jquery/tipsy/ （可用于替代所有title元素），鲍勃·蒙特维的nvd3或者从他们的引导甚至是Twitter的工具提示的http：// twitter.github.com/bootstrap/

Answer 2:

您可以使用简单的SVG <title>元素和默认浏览器渲染它传达？（注：这是不一样的title属性你可以使用DIV / IMG / HTML中的跨越，它需要一个子元素命名的title ）

 rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5 }

 <p>Mouseover the rect to see the tooltip on supporting browsers.</p> <svg xmlns="http://www.w3.org/2000/svg"> <rect> <title>Hello, World!</title> </rect> </svg>

或者，如果你真的想在你的SVG显示HTML，你可以直接嵌入HTML：

 rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5 } foreignObject { width: 100%; } svg div { text-align: center; line-height: 150px; }

 <svg xmlns="http://www.w3.org/2000/svg"> <rect/> <foreignObject> <body xmlns="http://www.w3.org/1999/xhtml"> <div> Hello, <b>World</b>! </div> </body> </foreignObject> </svg>

......但随后你需要JS打开显示器和关闭。如上所示，以使标签的一种方式出现在正确的位置是包装在相同的RECT和HTML <g>它们一起定位他们。

要使用JS寻找到SVG元素在屏幕上，你可以使用getBoundingClientRect()如http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Answer 3:

我发现的唯一的好办法是使用JavaScript来移动工具提示<div>周围。显然，这只是工作，如果你有一个SVG HTML文档中 - 而不是独立的。它需要Javascript。

 function showTooltip(evt, text) { let tooltip = document.getElementById("tooltip"); tooltip.innerHTML = text; tooltip.style.display = "block"; tooltip.style.left = evt.pageX + 10 + 'px'; tooltip.style.top = evt.pageY + 10 + 'px'; } function hideTooltip() { var tooltip = document.getElementById("tooltip"); tooltip.style.display = "none"; }

 #tooltip { background: cornsilk; border: 1px solid black; border-radius: 5px; padding: 5px; }

 <div id="tooltip" display="none" style="position: absolute; display: none;"></div> <svg> <rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" > </rect> </svg>

Answer 4:

我总是用我的设置通用的CSS称号。我只是建立分析为我的博客的管理页面。我不需要任何幻想。下面是一些代码...

let comps = g.selectAll('.myClass')
   .data(data)
   .enter()
   .append('rect')
   ...styling...
   ...transitions...
   ...whatever...

g.selectAll('.myClass')
   .append('svg:title')
   .text((d, i) => d.name + '-' + i);

和Chrome浏览器的截图...