Can svg:g trigger a mouseover event? Trying to change text "fill" style on mouseover.

[Hugh Lomas]

I am attempting to make the text of a node (rendered as a svg:text
element) to become "darker" when hovered. I have created a blocks.org
example:

http://bl.ocks.org/1678703

It seem to me as though the svg:g is totally ignoring the mouseover
event.

Most relevant snippet from the example would be

var text = vis.append("svg:g").selectAll("g")
.data( process.nodes )
.enter().append("svg:g")
.attr("pointer-events", "all")
.on("mouseover", function(){ console.log("mouseOver");
d3.select(this).select("text").style("fill", "#000");} )
.on("mouseout", function(){ console.log("mouseOut");
d3.select(this).select("text").style("fill", "#ccc");} );

Thank you.

[Ian Johnson]

It looks to me that you aren't putting your nodes inside those groups (the circles) so the groups dont have anything in them to click on. 

--
Ian Johnson

http://enja.org

[s...@alignedleft.com]

"g" groups are just empty containers. They don't actually occupy any drawing space; only their contents do. So unless you add elements to the "g", there will be nothing to be "moused over."

 

I recommend drawing a shape that occupies the space you want the "g" to occupy, and making it transparent.  This shape will then trigger the hover effect. Then you can draw all other elements in your group normally.

 

For example, something like:

 

d3.select("g").append("rect")

.attr("class", "mouseover-trigger")

.attr("x", 0)

.attr("width", 100)

.attr("height", 100)

.style("stroke-width", 0)

.style("fill", "white")

.style("opacity", 0.0);

 

d3.select("g").on("mouseover", function() { ... });

[Hugh Lomas]

I am putting svg:text elements inside of them.

From the example:

text.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.attr("pointer-events", "none")
.text(function(d) { return d.name; });

I am basing my code on the assumption that the "svg:g" element would
render itself with the width and height of its contained svg:text
element.

Inspecting the svg:g elements with Chrome does indeed portray them as
having a height and width equal to the contained svg:text element.

On Jan 25, 4:36 pm, Ian Johnson <enja...@gmail.com> wrote:
> It looks to me that you aren't putting your nodes inside those groups (the
> circles) so the groups dont have anything in them to click on.
>

[Hugh Lomas]

I have achieved the desired functionality by removing the "pointer-
events: none" attribute on the text node. I think I didn't realize it
earlier because of some copy-pasted CSS from a tutorial I contained
it.

Thank you all for your help.