Question

我用D3创建了一张地图并使用了来自nasa.gov的一些数据（https://data.nasa.gov/resource/y77d-th95.geojson）这是codepen 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的样式，左侧和顶部属性正在改变，但我似乎无法在屏幕上看到它。不知道我在这里做错了什么。

Answer 1

这里有三个问题：

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

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

Answer 2

http://codepen.io/anon/pen/YNWKpr

var div = svg.append('foreignObject').append('xhtml:div')
    .attr('class', 'tooltip')
    .style('opacity', 0.7);

您必须在foreignObject标记中包含非svg元素，并且在附加html元素时必须指定html命名空间。

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

2 个答案: