鼠标悬停时如何在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

我的工作范围很广。你可以在小提琴上工作并将其提升到新的水平：

       .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");
       })

请参阅此小提琴，了解更多信息和实施细节。

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

Answer 2

尝试将其附加到svg而不是......

current_position = d3.mouse(this); 
svg.append("text").text("Country Name")
   .attr('x', current_position[0])
   .attr('y', current_position[1])
   .attr('class', 'tooltip');  // then give it a class so you can hide it on mouseout

Answer 3

RewriteEngine on

RewriteCond %{QUERY_STRING} ^topic=(.+)$ [NC]
RewriteRule ^index.php$ http://newurl.com/index.php?topic=%1 [L,R,NE]