Point in svg path?

[suharshs]

Is there a good way using d3 to find if a x-y coordinate on an svg is enclosed by a path in the svg?

My application: I am plotting points on a world map and I want to find which country the point lies in.

I already tried using svg.getIntersectionList() to find which elements lie at that location but this finds the intersection of the bounding boxes of the path and not the paths themselves.

Thanks,

-Suharsh

[Ian Johnson]

you might try this library:

http://www.kevlindev.com/gui/math/intersection/index.htm

https://github.com/thelonious/js-intersections

i intend to try it out soon, but let us know if it's helpful!

--
Ian Johnson

http://enja.org

[Matthew Isabel]

Did either of you have any luck here? Right now I'm writing equations to model the few path boundaries I have, but it's a less than ideal solution. 

[b.j.k...@utwente.nl]

I'd look into JSTS for that. I'm probably biased 'cause I used the Java
JTS for many things, and it might be a bit overkill for the one function,
but you're bound to need more geometry calculations later on....

From https://github.com/bjornharrtell/jsts :
"The JSTS Topology Suite is a JavaScript library of spatial predicates and
functions
for processing geometry conforming to the Simple Features Specification
for SQL published by
the Open Geospatial Consortium. JSTS Topology Suite is also a JavaScript
port of the well
established Java library JTS Topology Suite
<http://tsusiatsoftware.net/jts/main.html> with
a built in parser for OpenLayers geometries."

BArend
--
Barend Köbben
ITC - University of Twente
PO Box 217, 7500AE Enschede (The Netherlands)
+31-(0)53 4874 253
@barendkobben

>--
>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.

[Matthew Isabel]

Ah, interesting. I got the equations to function as needed, but if I'm able to get the JSTS to work quickly I'll post the results. 

[Dan Schumann]

On option would be to convert the svg to a canvas, then see if the pixel is transparent using getData.  I'm going to give that a shot.

[Dan Schumann]

worked like a charm

I figured creating the canvas/context has overhead so I did it here

  generateTestCanvas: ->

    blob = new Blob([@svg.outerHTML], {type:"image/svg+xml;charset=utf-8"})

    url = URL.createObjectURL blob

    img = new Image

    whenjs.promise (resolve, reject) =>

      img.onload = =>

        URL.revokeObjectURL url

        @_testCanvas = $('<canvas>')[0]

        @_testContext = @_testCanvas.getContext '2d'

        @_testContext.drawImage img, 0, 0

        resolve()

      img.src = url

Then checking to see if the point has data or not

  testPoint: ({x, y}) ->

    console.log x, y

    data = @_testContext.getImageData(Math.round(x), Math.round(y), 1, 1).data

    console.log data

    data[3]