时间戳

首页 > 解决方案 > 如何向现有的 svg 圈子添加工具提示？

javascript - 如何向现有的 svg 圈子添加工具提示？

问题描述

我有多个从 CorelDraw 导出的现有 SVG 圆圈，并且希望每个圆圈在悬停时在工具提示中显示唯一的文本。在 g 元素中，我在圆圈中添加了文本元素。我将每个文本放在相应的圆圈旁边并带有相应的文本。

<g id="cities" class="gradici">
<circle class="first" r="7" />
<circle class="second" r="7 />
</g>

var Citytooltip = svg.selectAll("g.gradici").selectAll("text")
                  .data(naziviGradova)
                  .enter()
                  .append("text")
                  .style("visibility", "hidden")
                  .attr("x", function(d,i){return graddx[i]})
                  .attr("y",function(d,i){return graddy[i]})
                  .text(function(d) {return d;})
                  .attr("font-size", "10px")
                  .attr("fill", "#black");

当我将鼠标悬停在任何圆圈上时，我想得到所有文本在所有圆圈旁边可见/隐藏。

var city= svg.selectAll("#cities circle");

city
   .on("mouseover", (function(){Citytooltip.style("visibility", 
   "visible");}))
   .on("mouseout", (function(){Citytooltip.style("visibility", 
   "hidden");}));

但我正在犹豫如何让文本在我悬停的圆圈上方可见/隐藏。我想我应该以某种方式迭代槽城市，但我被困在如何做到这一点。有任何想法吗？

标签： javascriptd3.jssvg

解决方案

添加一个或元素作为元素的内容title，以便用户代理提供工具提示（取决于用户代理）：descriptionmetadatacircle

<g id="cities" class="gradici">
    <desc>A group of circles</desc>
    <circle class="first" r="7">
        <desc>First circle</desc>
    </circle>
    <circle class="second" r="7>
        <desc>Second circle</desc>
    </circle>
</g>

这是由 SVG 1.1 指定的。

对于现代桌面和移动 Web 浏览器，所提供的元素描述通常按照您的描述和预期呈现——当用户“将指针设备悬停”在circle包含该desc元素的元素上时出现的工具提示。

我的建议是不要用复杂而复杂的基于脚本的解决方案重新发明轮子，因为这些解决方案总是会给你的一些用户带来破坏的风险，而不是当上面的东西已经是 SVG 的一部分并且对你来说足够了。

推荐阅读