Leaflet + D3 Albers USA projection by shawnbot

This is an attempt to get Leaflet working with D3’s Albers USA projection.

This first stab works deceptively well: the coordinates are at least self-consistent, so centering, panning and zooming work as expected. There are some problems, though:

The d3.geo.albersUsa() projection appears to return null for coordinates that don’t fall within its parallels, which Leaflet doesn’t like.
Likely related, something in Leaflet’s bounding box calculation for the US GeoJSON produces NaNs and fails.
The D3 projection’s scale(.25) is a stab in the dark that makes the US approximately the right size at zoom 3, but is most certainly wrong.

In general, it’s not clear whether we should be transforming D3’s projection (which, according to the docs, doesn’t support translation anyway) or Leaflet’s transformation (currently a noop).

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <div id="map"></div>
  <script src="map.js"></script>
</body>

map.js

var proj = d3.geo.albersUsa()
  // .translate([0, 0])
  .scale(.5);

var AlbersProjection = {
  project: function(latLng) {
    var point = proj([latLng.lng, latLng.lat]);
    return point ? 
        new L.Point(point[0], point[1]) : 
	    	new L.Point(0, 0);
  },
  unproject: function(point) {
    var latLng = proj.invert([point.x, point.y]);
    return new L.LatLng(latLng[1], latLng[0]);
  }
}

var AlbersCRS = L.extend({}, L.CRS, {
  projection: AlbersProjection,
  transformation: new L.Transformation(1, 0, 1, 0),
  infinite: true
});

var center = [37.8, -96];
var map = new L.Map('map', {crs: AlbersCRS})
  .setView(center, 3);

var layer;

d3.json("states.json", function(error, data) {
  if (error) return console.error(error);
  layer = L.geoJson(data, {
  		style: {
        color: '#000',
        weight: 1,
        fillOpacity: 1,
        fillColor: '#fff'
      }
	  })
    .addTo(map);
  
  // map.fitBounds(layer.getBounds());
});