Dynamically Adding a tooltip to static SVG Using D3

Question

We have a static SVG image that we are trying to dynamically add tooltips to say, a hover event on a object within the SVG image using d3.js in the context of an AngularJS application.

The SVG image is a floorplan and is fairly complex, however we've started very small in the POC process. Here is a small representative snippet of one section:

D3.js is new to us, however from our research, it seems to be capable of doing what we need it to do since it seems to be designed to work with SVG and represent data in the SVG, however all of the examples we have found are of dynamically creating SVG (mainly charts) but not manipulating existing SVG images.

In a nutshell what we need to do is:

Find g tags that have id's starting with "f3" as in g id="f3s362c12" above
For each rect associated with the g tag, add a tooltip hover event ( possibly a label?)
When a user hovers over say g id="f3s362c12" select the rect and grab the corresponding data record for f3s362c12, that I have loaded from a .csv file, IE:

({"floor":"3","location":"f3s362c12","name":"David Byrne","occ":"Singer","img":"img/davidAvatar.jpg\r"})

Add this info to the tooltip/label so when you hover over g id=f3s362c12, you see a tooltip with David Byrne, whose occupation is singer with his avatar image.

I've created a Plunk that:

Loads the SVG in the HTML
Loads the .csv file.

The problem we're having is with the d3.js. For example, in our Plunk, in script.js, we do something like this to find our g tags:

 var svg = d3.select("#svgFP");
 var allG = svg.selectAll("g").each(function (d,i) {}

However, it's at this point that we hit the wall, since we are trying to find a rect on allG using "this" keyword.

  if (this.id.indexOf("f3") > -1)
    {
        //1. Add label/div/hover
        //2. Find corresponding record from array object.
        //3. Inject respective name, occupation and image into label/div along with mouseover/mouseout event.
    }

We've been using Firebug to try to find properties to use, but it's been quite frustrating and fruitless to say the least, so we thought that there might be one or two d3/angular guru's in SO that might be able to show us the way.

Thanks in advance.

Gerardo Furtado · Accepted Answer

The first problem you have in your plunker is your CSV: The first row a CSV has to be the header, which defines what each column is. Thus, I modified your CSV to this:

floor,location,name,surname,role,image
3,f3s362c12,David ,Byrne,Singer,img/davidAvatar.jpg
3,f3s362c11,Tina,Weymouth,Bassist,img/tinaAvatar.jpg
3,f3s362c2,Jerry,Harrison,Keyboards,img/jerryAvatar.jpg
3,f3s362c1,Chris,Frantz,Drums,img/chrisAvatar.jpg

Now comes your actual question.

The best solution for a D3 code would be binding the data to the DOM elements (in this case, your SVG). But, since you already have a static SVG, not made with D3 and not having any bound data, here is a solution.

First, select all relevant group elements:

var groups = d3.selectAll("g[id^='f3']");

And add the mouseover code to that selection.

In the mouseover code comes the most important part of this solution: we get the ID of the element which the cursor is over...

var groupId = this.id

... and then, based on this ID, we filter the previously loaded CSV:

var thisData = data.filter(function(d) {
    return d.location === groupId
});

This is what the above code does: we loaded the CSV in a variable named data. That variable is an array of objects, each object having a location property (look at the CSV header I created). Then, we compare the location of each object (d.location) with the ID of the group (groupId).

Now, you have a variable named thisData, which you can use to populate your tooltip.

Here is a demo with a MCVE version of your code:

var tooltip = d3.select("body")
            .append("div")
            .style("position", "absolute")
            .style("background-color", "gainsboro")
            .style("border", "1px solid black")
            .style("padding", "20px")
            .style("pointer-events", "none")
            .style("font-size", "12px");

        var data = d3.csvParse(d3.select("#csv").text());

        var groups = d3.selectAll("g[id^='f3']");

        groups.on("mousemove", function() {
            var groupId = this.id
            var thisData = data.filter(function(d) {
                return d.location === groupId
            });
            tooltip.html("Name: " + thisData[0].name + " " + thisData[0].surname + "
Role: " + thisData[0].role)
                .style("top", (d3.event.pageY - 2) + "px").style("left", (d3.event.pageX + 2) + "px")
                .style("visibility", "visible");
        }).on("mouseout", function() {
            tooltip.style("visibility", "hidden");
        });

pre {
	display: none;
}



floor,location,name,surname,role,image
3,f3s362c12,David ,Byrne,Singer,img/davidAvatar.jpg
3,f3s362c11,Tina,Weymouth,Bassist,img/tinaAvatar.jpg
3,f3s362c2,Jerry,Harrison,Keyboards,img/jerryAvatar.jpg
3,f3s362c1,Chris,Frantz,Drums,img/chrisAvatar.jpg

Summarising, these are the steps:

Create a selection to get your mouse events;
Load and parse your CSV;
When the user hover over a , filter your data array according to that 's ID;
Use the filtered array to create your tooltip's html.

PS: in this snippet I'm using a

element to store your CSV. I'm only doing this because, unlike a Plunker, I cannot load a CSV using the S.O. snippet.

Dynamically Adding a tooltip to static SVG Using D3

Answers (1)

Related Questions