晚上之后,我发现了我的错误!
我已经生成了一个HTML / SVG文件,该文件显示更多的相同的电子符号。
我现在搜索以显示tooltip
,并将某些信息链接到所显示的SVG“符号”。
由于使用相同的符号多次,所以我在<defs>
组的<svg>
部分中定义了一个符号。
使用<use>
SVG标签显示电子符号。
每个<use>
标签后跟一个<html:div>
标签,其中包含要在工具提示中显示的字符串。
我用来查找要在工具提示中显示的String的算法如下:
<use>
标签的SIBLING元素html:div
元素html:div
中找到的HTML部分放在工具提示元素中opacity
属性,因此可见问题(例如,案例1,2,4和5的问题是,在所有情况下,同级元素始终是 我的算法仅适用于情况3。<g>
部分中定义的<defs>
标签的同级和非 <use>
标签的同级元素。
在这种情况下,我已将<use>
标记替换为<defs>
部分中定义的标记。
问题
:如何将工具提示添加到<use>
标签或使用<use>
标签? $(document).ready(function() { var tooltip = d3.select("div.tooltip"); d3.select("svg").selectAll("g") .on("mouseover", function () { var sTooltip = "Tooltip: ?"; if (this.id.startsWith("u")) { sId = this.id + "info"; var e = document.getElementById(sId); if (e != null) { sTooltip = e.innerHTML; } } else { var e = this.nextElementSibling; if (e != null) { if (e.className.baseVal == "info") { sTooltip = e.innerHTML; } } } document.getElementById('tooltip').innerHTML = sTooltip; tooltip.style("opacity", "1"); }) .on("mousemove", function () { tooltip.style("left", (d3.event.pageX + 10) + "px"); tooltip.style("top", (d3.event.pageY + 10) + "px"); }) .on("mouseout", function () { return tooltip.style("opacity", "0"); }); });
.tooltip { pointer-events:none; opacity: 0; transition: opacity 0.4s; padding-left: 10px; padding-right: 10px; } div.tooltip { background: yellow; border:solid gray; position: absolute; max-width: 300px; text-align:center; } svg { margin:10px 20px; overflow:visible; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <p> <b>Electricité: plan Unifilaire</b> </p> <svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'> <defs> <g id="prise"> <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white" stroke-width="2" /> <line x1="0" y1="0" x2="20" y2="0" stroke="blue" stroke-width="2" /> <line x1="20" y1="-15" x2="20" y2="15" stroke="blue" stroke-width="2" /> <path d="m40,-20 a20,20 0 0,0 0,40" fill="white" stroke="blue" stroke-width="2" /> <line x1="40" y1="-20" x2="40" y2="-28" stroke="blue" stroke-width="2" /> <line x1="40" y1="20" x2="40" y2="28" stroke="blue" stroke-width="2" /> </g> </defs> <text x='50' y='40' font-size='20'>1.</text> <use href='#prise' x='100' y='40'/> <text x='50' y='100' font-size='20'>2.</text> <use href='#prise' x='100' y='100'/> <html:div class="info"> prise à droite de la porte de la chambre Est </html:div> <text x='50' y='160' font-size='20'>3.</text> <g id="interrupteur" transform="translate(100 160)"> <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white" stroke-width="2" /> <line x1="0" y1="0" x2="20" y2="0" stroke="red" stroke-width="2" /> <line x1="20" y1="-15" x2="20" y2="15" stroke="red" stroke-width="2" /> <path d="m40,-20 a20,20 0 0,0 0,40" fill="white" stroke="red" stroke-width="2" /> <line x1="40" y1="-20" x2="40" y2="-28" stroke="red" stroke-width="2" /> <line x1="40" y1="20" x2="40" y2="28" stroke="red" stroke-width="2" /> </g> <html:div class="info"> interrupteur de la lampe de la cuisine </html:div> <text x='50' y='220' font-size='20'>4.</text> <g> <use href='#prise' x='100' y='220' stroke='green'/> <text font-size="12" style="display:none">prise de la machine à laver à la cave</text> </g> <text x='50' y='280' font-size='20'>5.</text> <use id='u258' href='#prise' x='100' y='280'/> <html:div id="u258info"> prise de la machine à laver à la cave </html:div> </svg> <div id="tooltip" class="tooltip"> Tooltip: ? </div> </body> </html>
我已经生成了一个HTML / SVG文件,该文件显示相同的电子符号的时间更长。我现在搜索以显示工具提示,其中包含一些与显示的SVG“符号”链接的信息。由于相同的符号是...
晚上之后,我发现了我的错误!
在Java代码中,我已替换为
d3.select("svg").selectAll("g")
作者
d3.select("svg").selectAll("use")
现在只有情况2和5可以正常工作。
现在,在我的工作中,我将使用以下JavaScript代码
$(document).ready(function() {
var tooltip = d3.select("div.tooltip");
d3.select("svg").selectAll("use")
.on("mouseover", function ()
{
var sTooltip = "Tooltip: ?";
var e = this.nextElementSibling;
if (e != null)
{
if (e.className.baseVal == "info")
{
sTooltip = e.innerHTML;
}
}
document.getElementById('tooltip').innerHTML = sTooltip;
tooltip.style("opacity", "1");
})
.on("mousemove", function ()
{
tooltip.style("left", (d3.event.pageX + 10) + "px");
tooltip.style("top", (d3.event.pageY + 10) + "px");
})
.on("mouseout", function ()
{
return tooltip.style("opacity", "0");
});
});
晚上之后,我发现了我的错误!