javascript - CSS/HTML 中的弹出消息

Question

基本上我有一张 map ，我想在我将鼠标悬停在其中一个州上时获得显示该州名称的弹出消息。这就是我到目前为止所做的:(这只是代码的一部分)

var states = map.selectAll('path.state') 
.data(states.features)
    .enter().append('path')
    .attr('class', 'state')
    .attr('id', function(d) {console.log(d);return d.id;})
    .attr('d', path)
    .attr("stroke","white")
    .attr("stroke-width",2)
    .attr('fill', 'lightgreen')
    .on("mousemove",fnk)
    .on("mouseout",fnk2)

当函数“fnk()”被调用时(在mousemove上)，它基本上以绿色突出显示状态，并将状态名称存储在变量“dsa”。

function fnk() {
asd = d3.select(this).style("fill","green");
dsa = asd.data()[0].properties.gn_name;}

现在我想要做的是，变量dsa中的数据以某种弹出消息或当鼠标置于某种状态时处于事件状态的某个矩形元素的形式向用户显示。我尝试使用“警报”，但随后用户需要单击“确定”按钮来删除消息，并且我希望消息自行消失。

Answer 1

我将创建许多 div 用作弹出元素，将它们放置在每个状态上方，并设置其 css

visibility: hidden

然后在 fnk 中

<"your pop-up element">.style("visibility", "hidden")

当然，在 fnk2 中做相反的事情

.style("visibility", "visible")

我不太了解 JS 中的 DOM 处理，但这确实很过时。

您应该真正研究一下 JQuery，您可以使内容淡入和淡出更漂亮(而不是像我发布的代码那样只是消失和出现)。更不用说，它需要更少的代码并且在浏览器之间更可移植。