passing mouse events to lower layers in svg

[Kyle Foreman]

I'd like to have an svg path which is visible, but still have mouse events passed to other paths/shapes/etc underneath. So I'd like to have the mouse interaction treat the element as though its visibility is set to "hidden", but still actually render the element for display. Is this possible? 

For instance, imagine a map which is made up of a bunch of paths, each of which has its own mouseover attributes. Then you want to overlay a path which partially occludes portions of several of the map's paths. The only way I've been able to get the mouseover correct in that situation is to draw a transparent copy of the map on top of the overlay, but I'm hoping to find a way that doesn't require duplicate rendering.

Thanks

Kyle

[Laurian Gridinoc]

Test if the pointer-events CSS property will allow you this, it works with html dom elements, I guess it should work in svg too:

https://developer.mozilla.org/en/CSS/pointer-events

Laurian

[Kyle Foreman]

Works perfect, thanks Laurian!

[EightBitBoy]

Works like a charm!

[Frank Guerino]

Hi,

Can you please elaborate on what you mean by "lower layers"?  Is this a concept we should understand for D3?

Thanks,

Frank

On Mon, Apr 23, 2012 at 9:29 AM, EightBitBoy <haert...@gmail.com> wrote:

Works like a charm!

[Kyle Foreman]

I mean layering objects (paths, rectangles, text, etc) on top of each other on an svg.

[Frank Guerino]

Thanks.  Does anyone know if there are any best practices for how to do so and/or tutorials on how to change the scope of objects (for things like moving them forward or backward)?

[Kyle Foreman]

Well, SVG does not have a z-index that you can alter, so it's all based on element ordering in the DOM. So, the simplest way is adding elements to the DOM starting with the lowest (I.e. background) layer. E.g.:

svg = d3.select('body').append('svg')

svg.append('rect').attr('id', 'layer1')

svg.append('circle').attr('id', 'layer2')

Or if you need to do things more dynamically insert() allows you to add elements places other than the end. E.g.:

svg = d3.select('body').append('svg')

svg.append('circle').attr('id', 'layer2')

svg.insert('rect', '#layer2').attr('id', 'layer1')

[Frank Guerino]

Thanks Kyle.  Is there ever a need to "re-order" the scope of the elements and, if so, what's the best way to do so?

[EightBitBoy]

A good example is a simple line chart with a couple of graphs in it. Imagine you want to highlight a graph on mouseover by changing its color or something like that. What you will notice is that the graph is being intersected by other graphs which were drawn after the highlighted graph, so this one graph lies beneath the other ones. Those intersections do not look very good and a possibility to get rid of them is simply to delete the graph you want to highligh and draw it again. Now it is on top of all graphs and there are not visible intersections.

[Kyle Foreman]

Hi Frank,

What do you mean by 'scope' in this case? Sometimes I'll reorder the elements within the DOM (so that one is drawn on top of another), but that's not scope in the object-oriented programming sense. 

On Apr 23, 2012, at 11:09 PM, Frank Guerino <fgue...@gmail.com> wrote:

Thanks Kyle.  Is there ever a need to "re-order" the scope of the elements and, if so, what's the best way to do so?

On Mon, Apr 23, 2012 at 1:22 PM, Kyle Foreman <kylef...@gmail.com> wrote:

Well, SVG does not have a z-index that you can alter, so it's all based on element ordering in the DOM. So, the simplest way is adding elements to the DOM starting with the lowest (I.e. background) layer. E.g.:

svg = d3.select('body').append('svg')

svg.append('rect').attr('id', 'layer1')

svg.append('circle').attr('id', 'layer2')

Or if you need to do things more dynamically insert() allows you to add elements places other,  than the end. E.g.:

[Frank Guerino]

Hi,

This description definitely makes sense.  So is the best way to achieve the correction to delete and redraw at the highest level of drawing scope?  If so, how do you "delete," as I don't think I've seen any D3 delete methods?

Thanks,

Frank

[Mike Bostock]

Here's an easy way to move an element to the front of its siblings:

d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};

Then you can say:

d3.select("p").moveToFront().style("color", "red");

Mike

[Kyle Foreman]

Mike's way is the best for moving an element. To answer your question about "deleting" (which you don't need to do in Mike's example), you can use the .remove() method.

[Frank Guerino]

Thanks Kyle.

[Frank Guerino]

Interesting.  So, in the case where you have multiple graphs on a page, would it be a best practice to always move the graph you want to highlight or manipulate to the forefront, using this code?

[Kyle Foreman]

Only if they're overlapping and the highlighting would be obscured if left in its current position in the DOM. 

[Frank Guerino]

Good info.  Thanks to everyone.

[Shreeram Kushwaha]

Suppose I have rectangle elements each inside a <g> tag. And on mouseover I want to bring the rectangle in FRONT. Then how I have to call the moveToFront().

[Chris Viau]

By trying it. Here is an example of the same move to front technique: http://tributary.io/inlet/4477544/

[Shreeram Kushwaha]

I am not talking about dragging. I am talking about this type of move to front.

http://enjalot.com/tributary/3651456/

Considering the code in above link, what if every circle is in a group tag <g></g>, then how to bring it to the front.

Edited Code(Putting every circle in a <g> tag)

http://enjalot.com/inlet/4483215/

--

(*Shreeram Kushwaha* )
Final Year, Undergraduate
Computer Science and Engineering
NIT Rourkela,
Orissa,India

[Sajjad Anwar]

On Jan 8, 2013 1:05 AM, "Shreeram Kushwaha" <ram90...@gmail.com> wrote:
>
> Suppose I have rectangle elements each inside a <g> tag. And on mouseover I want to bring the rectangle in FRONT. Then how I have to call the moveToFront().
>

Have you tried using the .on()?
May be d3.selectAll("rect").on("mouseover", moveToFront)

Cheers,
Sajjad

(handheld)

[Chris Viau]

On Jan 8, 2013 4:00 AM, "Shreeram Kushwaha" <ram90...@gmail.com> wrote:

I am not talking about dragging. I am talking about this type of move to front.

I know. My example is about moving to front while dragging. This is the move to front part: this.parentNode.appendChild(this); You just have to apply it to the g element like this:

http://enjalot.com/inlet/4483672/

[Shreeram Kushwaha]

Thanksssss a ton!!!!

[Shreeram Kushwaha]

How to use the value of translate from a group tag.

Suppose I have two rectangles 

 

<g class = "node" transform=translate(1,1)>

<rect width="20" height="30  fill="#aaa" stroke="#000"></rect>

</g>

<g class = "node" transform=translate(100,100)>

<rect width="20" height="30  fill="#aaa" stroke="#000"></rect>

</g>

I want to connect this two rectangles using a path, for which i need the value of translate of the two <g> tags which will act as the starting and the end point.

But how to extract the value of translate??/??

[Chris Viau]

One way is to use d3.transform: d3.transform(g.attr('transform')).translate

try it here: http://tributary.io/inlet/4506092/

[Shreeram Kushwaha]

<g id ="a" class = "node" transform=translate(1,1)>

<rect width="20" height="30"  fill="#aaa" stroke="#000"></rect>

</g>

@Chris: 

Suppose I have mouse over event on the <g> tag, n on mouse over I call a function moverg().

please tell me how to access the width of the rectangle in the moverg() function.

[Chris Viau]

d3.select('g').on('mouseover',  moverg);

function moverg(d, i){ 

    var rectW = d3.select(this).select('rect').attr('width');