CODEWITHSUNDEEP
javascriptd3.js
GowriShankar
GowriShankar

Reputation: 1654

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

I created a world map in d3.js.In that i need to enable the tooltip while hovering each country.

I did mouseover using mouseover event but i don't know how to add tooltip.Also i got the current coordinate point using d3.mouse(this).

My problem is i need to know how to create a tooltip.I tried a few ways but not getting the proper solution.

My Code: ( I tried for append text when hover the countries But no Luck)

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

         })

Please help.Thanks in advance.

Upvotes: 0

Views: 3118

Answers (3)

graphDude
graphDude

Reputation: 11

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>

Upvotes: 0

spooky
spooky

Reputation: 1648

I got it working to a good extend.. You can work on the fiddle and get it to next level:

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

See this fiddle for more information and details of implementation.

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

Upvotes: 3

double.emms
double.emms

Reputation: 553

Try appending it to svg instead....

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

Upvotes: 1

Related Questions