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...)
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 eg
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, ie 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
).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.