为什么我的工具提示没有显示？

Question

我用 D3 制作了一张地图，并使用了来自 nasa.gov 的一些数据（https://data.nasa.gov/resource/y77d-th95.geojson）这是代码笔 http://codepen.io/redixhumayun/full/ VPepqM/

我尝试使用以下代码制作工具提示。

//setting up the tooltip here
var div = svg.append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0.7);

var meteorites = meteorite.selectAll('circle')
        .data(data.features)
        .enter()
        .append('circle')
        .attr('cx', function(d) {
            return projection([d.properties.reclong, d.properties.reclat])[0]
        })
        .attr('cy', function(d) {
            return projection([d.properties.reclong, d.properties.reclat])[1]
        })
        .attr('fill', function(d) {
            return color_scale(d.properties.mass)
        })
        .attr('stroke', 'black')
        .attr("stroke-width", 1)
        .attr('r', function(d) {
            return weight_scale(d.properties.mass);
        })
        .attr('fill-opacity', function(d) {
            if (weight_scale(d.properties.mass) > 7) {
                return 0.5
            }
            return 1;
        })
        .on('mouseover', function(d) {
            div.transition().duration(200)
                .style('opacity', 0.9)
                .style('left', (d3.event.pageX) + 'px')
                .style('top', (d3.event.pageY / 1.5) + 'px')
            div.html('<p>Please show up</p>');
        }).on('mouseout', function(d){
          div.transition().duration(200)
             .style('opacity', 0);
        })

但是，工具提示不显示。我什至尝试将工具提示的 z-index 更改为大于底层地图的 z-index，以便它不会被地图隐藏，但没有运气。

当我在元素检查器中检查工具提示时，它显示工具提示 div 的 style、left 和 top 属性正在更改，但我似乎无法在屏幕上看到它。不知道我在这里做错了什么。

Answer 1

你在这里有三个问题：

首先，在CSS中设置<div>to的位置absolute：

position: absolute;

其次，最大的问题：你不能将 a 附加<div>到 SVG。好消息是您不需要（因为我们只是将工具提示 div 设置为绝对位置）。因此，将 div 附加到正文：

var div = d3.select("body")
    .append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0.7);

第三个问题：设置pointer-eventstonone或将工具提示向右移动一点，否则它会妨碍您的鼠标悬停事件：

.style('left', d3.event.pageX + 10 + 'px')

这是您更新的 CodePen：http ://codepen.io/anon/pen/GrqKBY?editors=0110