Determining coordinates in lat/lng of a point in pixels on a map after zoom has been applied

Question

I'm trying to determine coordinates of point in pixels on a map using d3. The ultimate goal is determine which countries are currently visible on the map. Here's the code I'm using:

method: function() {
    var e = $("#" + this.getView().getId());
    if (!e || e.length === 0) {
        return;
    }
    this.width = e.width();
    this.height = e.height();

    this.topojson = window.topojson;
    var width = this.width;
    var height = this.height;
    var centered;
    var d3v3 = window.d3v3;

    var projection = d3v3.geo.mercator()
        .translate([width / 2, height / 2]);

    var path = d3v3.geo.path()
        .projection(projection);

    var svg = d3v3.select("#" + this.byId("map").getId());

    svg.selectAll("g").remove();

    svg
        .attr("width", width)
        .attr("height", height);

    svg.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height)
        .on("click", clicked);

    var g = svg.append("g");

    d3v3.json(getPath("/110m_admin_0.json"), function(us) {
          g.append("g")
              .attr("id", "states")
              .attr("class", "counties")
            .selectAll("path")
              .data(topojson.feature(us, us.objects["110m_admin_0_"]).features)
            .enter().append("path")
              .attr("d", path)
              .attr("class", function(d) { return "q"+(Math.floor((Math.random() * 9) + 0)) + "-9"; });
        });

    var zoom = d3v3.behavior.zoom()
    .on("zoom",$.proxy(function() {
        var width1 = width/2;
        var height1 = height/2;
        var xt1 = d3v3.event.translate[0];
        var yt1 = d3v3.event.translate[1];
        var x = xt1;
        var y = yt1;
        x+=width1;
        y+=height1;
        var proj = projection.invert([x,y]);
        proj[0]*=-1;
        proj[1]*=-1;
        var closestCountry = this.closestCountry(proj);

        console.log(d3v3.event.scale + " | " + [x,y] + " | " + proj + " | " + closestCountry );

        g.attr("transform","translate("+
            d3v3.event.translate.join(",")+")scale("+d3v3.event.scale+")");
        g.selectAll("path")
            .attr("d", path.projection(projection));

    },this));

    svg.call(zoom);
}

This code works when the zoom level is 1, but fails as soon as the zoom level changes.

Here's a few variations I've tried.

1)

var x = d3v3.event.translate[0];
var y = d3v3.event.translate[1];
x+=width/2;
y+=height/2;
var proj = projection.invert([x,y]);

2)

var x = d3v3.event.translate[0]/d3v3.event.scale;
var y = d3v3.event.translate[1]/d3v3.event.scale;
x+=width/2;
y+=height/2;
var proj = projection.invert([x,y]);

3)

var x = d3v3.event.translate[0];
var y = d3v3.event.translate[1];
x+=width/2*d3v3.event.scale;
y+=height/2*d3v3.event.scale;
var proj = projection.invert([x,y]);

4)

var x = d3v3.event.translate[0]/d3v3.event.scale;
var y = d3v3.event.translate[1]/d3v3.event.scale;
x+=width/2*d3v3.event.scale;
y+=height/2*d3v3.event.scale;
var proj = projection.invert([x,y]);

One thing I have noticed is that whatever the zoom level, projection.invert() for the same [x,y] point (e.g. [1200,600]) always return the same lng/lat. Furthermore, none of the attempts I've made manage to keep [x,y] constant at varying zoom level so there is something else at play here outside of the translation and scale. I suspect it might have something to do with the projection, but I've still not figured out what.

Answer 1

After zoom has been applied, I haven't found a way to go from a point in pixel to a coordinate in lng/lat or from a point in pixel to a country.

That being said, I found an alternate method that works well too. I have a list of all the countries and their centroids in lng/lat. From that list, I resolve their position in pixel and adjust them based on scale and translation. Finally, I find which one is the closest to the center. Here's the code:

closest: function() {
    var p2 = [0,0];
    var d = [width/2,height/2];
    var scale = d3v3.event.scale;
    var translate = d3v3.event.translate;
    var min = Number.MAX_VALUE;
    var minCountry = null;
    for ( var key in this.centroids) {
        var p1 = projection(this.centroids[key]);
        p1[0]*=scale;
        p1[1]*=scale;
        p1[0]+=translate[0]-d[0];
        p1[1]+=translate[1]-d[1];
        var distance = Math.sqrt(Math.pow(p2[0] - p1[0],2) + Math.pow(p2[1] - p1[1],2));
        if (distance < min) {
            min = distance;
            minCountry = key;
        }
    }
    return [ minCountry, min ];
}