javascript - 如何在鼠标悬停时在 d3.js 中创建工具提示？

Question

我在d3.js中创建了一张世界地图。我需要在将鼠标悬停在每个国家/地区时启用工具提示。

我使用 mouseover 事件进行了鼠标悬停，但我不知道如何添加工具提示。此外，我使用 d3.mouse(this) 获取了当前坐标点。

我的问题是我需要知道如何创建工具提示。我尝试了几种方法但没有得到正确的解决方案。

我的代码:(我尝试在将鼠标悬停在国家/地区时附加文本，但没有运气)

svg.selectAll(".countries")
            .data(topojson.feature(world, world.objects.countries).features)
                  .enter()
                  .append("path")
                    .attr("style", "fill:" + json.cbc)
                    .attr("class", "country")
                    .attr("d", path)

.on("mouseover", function(d) {  

                current_position = d3.mouse(this); 
                d3.select(this)
                    .append("text").text("Country Name")
                    .attr('x', current_position[0])
                    .attr('y', current_position[1])
                    //.attr('fill', 'black')​

         })

请帮忙。提前致谢。

Answer 1

我已经让它工作到了很好的程度..你可以练习 fiddle 并将其提升到一个新的水平:

       .on("mouseover", function(d){
           current_position = d3.mouse(this); 
           var tooltipDiv = document.getElementById('tooltip');
           tooltipDiv.innerHTML = d.id;
           tooltipDiv.style.top = current_position[1]+'px';
           tooltipDiv.style.left = current_position[0]+'px';
           tooltipDiv.style.display = "block";

           d3.select(this).style("fill", "red");
       })

请参阅此 fiddle 以获取更多信息和实现细节。

http://jsfiddle.net/sam0kqvx/24/