Question

基本上我有一张地图，当我将鼠标悬停在其中一个状态上以获取显示状态名称的弹出消息时，我想这样做。这就是我到目前为止所做的:(这只是代码的一部分）

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，你可以让东西淡入淡出更漂亮（而不是像我发布的代码一样消失和出现）。更不用说，它需要更少的代码，并且在浏览器中更容易移植。

在CSS / HTML中弹出消息

1 个答案: