SVG getIntersectionList() and viewBox

[Artan Simeqi]

I am using SVG getIntersectionList() to get the list of objects at a point clicked with a mouse.

The code is something like this:

    svg.on("click", function () {

        var loc = d3.mouse(this);

       var rpos = svg[0][0].createSVGRect();

       rpos.x = loc[0];

       rpos.y = loc[1];

       rpos.width = rpos.height = 1;

       var elements = svg[0][0].getIntersectionList(rpos, null);

       // do something with elements

    });

This works well if svg has no viewBox. But I need viewBox to handle window resize automatically.

With viewBox the intersectionList is wrong quite often. For example I sometimes click inside a circle

but the circle is not in the intersected list or I click outside the circle and the circle is selected

anyway.

I am assuming that I shouldn't use the mouse coordinates loc[0] and loc[1] directly while

building rectangle rpos. Probably I need to transform those coordinates to a local (or global?) coordinate system, but I have no idea how to get the transformation matrix and how to apply it.

Any help will be appreciated.

Thanks,

             Artan

[marc fawzi]

I've ran into inconsistent viewBox behavior across the popular browsers (using the same values on same machine) and since then I've been reszing the SVG in the code by making it relative to the height and/or width of the container in dynamic manner

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Artan Simeqi]

Thanks,

resizing the SVG myself is not very desirable in my case since I do some heavy computations which take several seconds

before I draw the SVG. I guess I could separate the algorithm in 2 parts where I make the size independent calculations only 

once and only do the size dependent calculations on resize but the algorithm is quite complex so I was hoping to use 

the vector properties of SVG.

Thanks,

              Artan