.on ('mouseover') on d3

Question

I have a clarification question regarding the .on('mouseover') method in d3. The code I have is:

svg.selectAll('text')
            .data(dataset)
            .enter()
            .append('text')
            .attr('x',function(d){
              return xScale(d[0]);
            })
            .attr('y',function(d){
              return yScale(d[1]);
            })
            .text(function(d) {
                return d[0] + ',' + d[1];
              })
            .style('visibility','hidden');
            .on('mouseover',...)

What kind of function shall I put instead of the ... in the code to make the style of a single text tag become visible when hovering with the mouse?

I have checked different solutions but none of them work. (One is: d3 - trigger mouseover event)

Moreover, I was wondering if what I thought about d3 workflow is corrected (I started to learn d3 only yesterday so be patient..): .selectAll iterates through what it is given to it inside the .data argument. At each iteration a text object(?) is created at the given position and with a given label. What does the .style refer to? The single object .selectAll iterates through? So are there multiple .style for each object iterated? And how to modify that object? Would d3.select(this).style('visibility','visible') be enough? (Looking at the link above it does not seem so...)

Answer 1

You would need the following code:

.on("mouseover", function() { d3.select(this).style("visibility", "visible"); });

That said, hidden elements never get mouse events, so this code will never be triggered. You'll have to use another element that does receive events to trigger the text appearing. See e.g. this question. As pointed out in the comments, you can use the pointer-events property to make non-visible elements receive mouse events.

This is what happens behind the scenes when you run this code:

• svg.selectAll('text') selects all text elements.
• .data(dataset) binds the data in dataset to those selected elements.
• .enter() chooses the enter selection. The enter selection contains all data items for which no matching DOM element was found, i.e. everything in dataset that has no matching text element.
• .append('text') appends a new text element for each of the items in the enter selection.

Everything else happens for each item in the enter selection as well. So you're setting the attributes, styles, etc for each of the added elements. If you pass a function when setting an attribute, it's evaluated with the data element that is bound to the particular DOM element (d).