2

I've been extending the code in this example:

http://bl.ocks.org/mbostock/5914438

But I can't seem to figure out how to place points on this map in a manner in which they can be integrated in the zoom. Paths work fine but it seems like the modified projection can't be used to project the coordinates of the points, and in the zoomed function, the scale() addition to the transform() when applied to the element containing the points seems to scale the points so large that they fill the entire screen. Here's my additional points:

var sitesG = svg.append("g").attr("id","sitesG");
var osites = sitesG.selectAll(".sites")
 .data(sites)
 .enter()
 .append("g")
 .attr("transform", function(d) {return "translate(" + projection([d.x,d.y]) + ")scale(" + projection.scale() + ")"})

osites.append("circle").attr("r", 10)

And here's the function in zoomed():

d3.select("#sitesG")
  .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")

I've tried this with individual elements for the sites as well, but with no success. Does anyone have an example that puts points on geo.tile?

Elijah
  • 4,609
  • 3
  • 28
  • 36

1 Answers1

2

I managed to figure it out. My main problem was that I was not scaling the "r" attribute of the circles to match the zoom.scale() when I was properly projecting the points, which caused them to have 13,000px+ radii.

You can see it working here: http://bl.ocks.org/emeeks/6147081

Elijah
  • 4,609
  • 3
  • 28
  • 36
  • I know this is an old post but I have been following your block example and encountered a bug when the paths are simple point-to-point paths. Made an SO post here: https://stackoverflow.com/questions/49283086/d3-geo-tile-point-to-point-path-not-showing-for-varying-widths I'm not really sure what's happening but in case you have some thoughts to share, it would really be appreciated. – iamnobody Mar 15 '18 at 07:20