CODEWITHSUNDEEP
javascriptd3.jsdictionary
RaditzLawliet
RaditzLawliet

Reputation: 503

D3 Finding path from lat & long

I'm using d3 to draw map to render path from data map topojson, im checked in path save data lat & long. now, i want to finding the "path" element or data of the path using lat & long. it is possible ?

my code to render data

svgBig.append("g")
  .attr("class", "poly")
.selectAll("path")
  .data(topojson.feature(json, json.objects.depthmap).features)
.enter().append("path")
  .attr("d", path)
  .on("click", function(d,i){
    beforeApplyingData(d);
  })
  .moveToBack()
  .style("stroke", function(d) { return drawcolorpath(d.id); })
  .style("fill", function(d) { return drawcolorpath(d.id); })
  ;

im bout drawing depth of map. the data only include depth value with key 'id'. The data only include lat & long and id (depth) and fill it with colour with id.

now im about getting trouble to find nearly "path" to get the d.id (depth) from lat & long. it is possible ?

thanks

i upload the problem http://jsfiddle.net/1fqsv4oh/1/ When i click path of map, i got d.id/depth. the problem is when i click the ship, i got lat&lng, then how i can get d.id/depth from lat&lng ? or depth of sea under the ship ?

Upvotes: 1

Views: 181

Answers (1)

angus l
angus l

Reputation: 1587

You can get the underlying depth by making the ship transparent to click events. Add this to your CSS or as a style on your ships:

svg#svgBig image {
    pointer-events:none;
}

The ship won't register your click event, and it will pass to the path underneath which returns the depth as you asked.

Pointer-events work OK in Chrome and Safari, but you should check compatibility with IE if that matters to you.

I've also shown how you could simplify your color function using D3's threshold scale. These are really useful for doing exactly what you're doing here: 13 colors, 12 unevenly-spaced threshold values. Have a look at the comments in your fiddle here to see how it's done: http://jsfiddle.net/1fqsv4oh/2/

var quantizeCustom3 = d3.scale.threshold()
    .domain([-40,-35,-30,-25,-20,-15,-10,-5,0,25,50,75,100])
    .range(color);

Upvotes: 1

Related Questions