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

Question

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

我使用 mouseover 事件进行了鼠标悬停，但我不知道如何添加 tooltip.Also 我使用 d3.mouse(this).

获得了当前坐标点

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

我的代码：（我尝试在将鼠标悬停在国家/地区时追加文本，但没有成功）

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')

         })

请提前help.Thanks

Answer 1

尝试将其附加到 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 2

我得到了很好的扩展.. 你可以在 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/

Answer 3

JS:
if (CB == null || typeof (CB) != "object") {
    var CB = new Object();
}

(function () {
    //private var's and functions
    function draw(id, json) {
        document.getElementById('title').innerHTML = "World Map";

        var width = 960,
            height = 500;

        var projection = d3.geo.robinson()
            .scale(150)
        //.translate(100,100)
        .precision(.5);

        var path = d3.geo.path()
            .projection(projection);

        var svg = d3.select("#" + id)
            .attr("width", width)
            .attr("height", height)
            .attr("style", "background:" + json.bc);

        // grid
var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);

        svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

        //shape
 d3.json("https://dl.dropboxusercontent.com/s/2qg71ltlq0hc88j/readme-world-110m.json", function (error, world) {
           svg.selectAll(".countries")
                  .data(topojson.feature(world, world.objects.countries).features)
                  .enter()
                  .append("path")
                    .attr("style", "fill:#FEFEE4")
                    .attr("class", "country")
                    .attr("d", path)

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



           .on("mouseout", function(d){
               d3.select(this).style("fill", "white");
               var tooltipDiv = document.getElementById('tooltip');
               tooltipDiv.style.display = "none";
           })

        });

    }

    window.CB.geo = {
        draw: draw
    };
})();

Html:
<h1 id="title"></h1>
<div id="tooltip" style="display:none;position:absolute;z-index:1001;background-color:gray"></div>
<svg id="map_container"></svg>
<script>
    // Json Datas
    var json = {

    };

    CB.geo.draw("map_container", json);
</script>

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

How to create a tooltip in d3.js while mouseover?

javascript

d3.js

我的代码：（我尝试在将鼠标悬停在国家/地区时追加文本，但没有成功）