Question

我有一个d3实现，它在用户鼠标悬停时在元素上显示悬停面板。我有一个新的要求，即在svg的右下角显示相同风格的摘要面板。这是我用来显示onmouseover悬停面板的d3代码：

d3.select('UnitedStatesTotalPanel')
    .style("top", (d3.event.pageY-10)+"px")
    .style("left", (d3.event.pageX+10)+"px");

是否可以调整此代码以在固定位置显示svg上的div？问题是上面的代码是基于事件的发生，因此似乎需要调整或更改此代码以适应div的一次性显示。

Answer 1

您可以使用offsetTop和offsetLeft来获取SVG的位置，然后相应地设置div的位置。

问题是SVG不支持offsetTop / offsetLeft，因此，您必须将SVG包装在Application.Activate()中。

要显示与<div>事件无关的div，只需将其附加到任何其他常规元素。

查看此演示：

mouseover

var svgPosition = document.getElementById("mySvg");

var div = d3.select("body")
	.append("div")
	.attr("class", "fixedDiv");
	
div.html("This is a fixed div<br>based on SVG position")
	.style("top", svgPosition.offsetTop + 90 + "px")
	.style("left", svgPosition.offsetLeft + 10 + "px");

svg {
    background-color: tan;
}

.fixedDiv {
    position: absolute;
    padding: 4px;
    border: 1px solid gray;	
    border-radius: 4px;
    background-color: lightblue;
}

如何使用d3在svg上的固定位置显示div？

1 个答案: