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

Question

我用 D3 制作了一张 map ，并使用了来自 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 更改为大于底层 map 的 z-index，这样它就不会被 map 隐藏，但没有成功。

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

Answer 1

这里有三个问题:

首先，设置<div>的位置至 absolute在 CSS 中:

position: absolute;

其次，最大的问题:你不能追加一个<div>到 SVG。好消息是您不需要这样做(因为我们只是将工具提示 div 设置为绝对位置)。因此，将 div 附加到主体:

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

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

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

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