d3 fitSize gives NaN values

Question

I want to make my d3 map fit to a svg container created with dynamic width and height attributes. It works so far by using the following code:

var height = $("#map-container").height(),
        width = height * 0.9;

var svg = d3.select("#map-container")
        .append("svg")
        .attr("width",width)
        .attr("height",height); 

d3.queue()
    .defer(d3.json,"./data/simplified20.json")
    .await(drawMap);

function drawMap(error,bw) {
    if (error) throw error;

    var features = bw.features;

    var projection = d3.geoMercator()
        .rotate([-8.673659631519788,0])
        .center([0,48.70015318963632])
        .scale(height * 10.5)
        .translate([width / 1.8, height / 1.5]);

    var path = d3.geoPath().projection(projection);

        var map = svg.append("g")
        .attr("id","karte-rdb");

    map
        .selectAll("path")
        .data(features)
        .enter().append("path")
        .attr("d", path)

   }

If I replace the projection functions with fitSize(), my path is rendered with NaN values.

    var projection = d3.geoMercator()
        .fitSize([width,height],features);

Heres a sample of my geojson. It is unprojected data with lon-lat-pairs.

{
"type": "FeatureCollection",
"crs": {
    "type": "name",
    "properties": {
        "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
},
"features": [{
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [[[7.5219,
        49.67881],
        [7.50952,
        49.67636],
        ...

Can't find my mistake so far. Thanks in advance!

Answer 1

You need to pass a single geojson object to .fitSize, as opposed to an array of features.

The API documentation notes, that .fitExtent ( .fitSize is minor modification of .fitExtent ):

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent

(documentation)

So, passing an array of features: bw.features (or in my snippet, geojson.features) will not work:

var width = 500; var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);
  
var geojson = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-2.6654607764398683,51.61724854430291],[-3.086082395894614,53.25815360160863],[-3.0505151266024857,54.98110391177964],[-2.023703526168841,55.804838250547114],[0.3283754561497929,53.086405538943964],[1.7711694670000782,52.48583428797007],[0.2696121416671442,50.74647492722601],[-3.4340230737523996,50.6097328391172],[-2.6654607764398683,51.61724854430291]]]},"properties":{"name":"England"},"id":"ENG"},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-7.247452903073734,55.06861884816928],[-6.270126199046532,54.09720305424429],[-6.370642394872114,52.17953201060634],[-9.66293440891312,51.511136683930474],[-10.276856404955524,52.267046946995976],[-9.78664664992922,54.3378691293158],[-7.247452903073734,55.06861884816928]]]},"properties":{"name":"Ireland"},"id":"IRL"},
{"type":"Feature","geometry":null,"properties":{"name":"N. Ireland"},"id":"NIR"},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-2.023703526168841,55.804838250547114],[-3.0505151266024857,54.98110391177964],[-3.964439307108936,54.771068064444506],[-6.0041448808619124,56.61763322226588],[-4.989704504529879,58.628288885817824],[-3.4927863882350483,57.71266386384123],[-1.7608150140096246,57.473091725474596],[-2.023703526168841,55.804838250547114]]]},"properties":{"name":"Scotland"},"id":"SCT"},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-3.086082395894614,53.25815360160863],[-2.6654607764398683,51.61724854430291],[-4.1979461620268275,52.27908025074955],[-3.086082395894614,53.25815360160863]]]},"properties":{"name":"Wales"},"id":"WLS"}
]};

var projection = d3.geoMercator()
  .fitSize([width,height],geojson.features);  // pass an array of features
  
var path = d3.geoPath().projection(projection);

svg.append("path")
  .datum(geojson)
  .attr("d",path);

  console.log(d3.select("path").attr("d"));
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

But, using the whole feature collection to fit the size should:

var width = 500; var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);
  
var geojson = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-2.6654607764398683,51.61724854430291],[-3.086082395894614,53.25815360160863],[-3.0505151266024857,54.98110391177964],[-2.023703526168841,55.804838250547114],[0.3283754561497929,53.086405538943964],[1.7711694670000782,52.48583428797007],[0.2696121416671442,50.74647492722601],[-3.4340230737523996,50.6097328391172],[-2.6654607764398683,51.61724854430291]]]},"properties":{"name":"England"},"id":"ENG"},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-7.247452903073734,55.06861884816928],[-6.270126199046532,54.09720305424429],[-6.370642394872114,52.17953201060634],[-9.66293440891312,51.511136683930474],[-10.276856404955524,52.267046946995976],[-9.78664664992922,54.3378691293158],[-7.247452903073734,55.06861884816928]]]},"properties":{"name":"Ireland"},"id":"IRL"},
{"type":"Feature","geometry":null,"properties":{"name":"N. Ireland"},"id":"NIR"},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-2.023703526168841,55.804838250547114],[-3.0505151266024857,54.98110391177964],[-3.964439307108936,54.771068064444506],[-6.0041448808619124,56.61763322226588],[-4.989704504529879,58.628288885817824],[-3.4927863882350483,57.71266386384123],[-1.7608150140096246,57.473091725474596],[-2.023703526168841,55.804838250547114]]]},"properties":{"name":"Scotland"},"id":"SCT"},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-3.086082395894614,53.25815360160863],[-2.6654607764398683,51.61724854430291],[-4.1979461620268275,52.27908025074955],[-3.086082395894614,53.25815360160863]]]},"properties":{"name":"Wales"},"id":"WLS"}
]};

var projection = d3.geoMercator()
  .fitSize([width,height],geojson); // pass the feature collection
  
var path = d3.geoPath().projection(projection);

svg.append("path")
  .datum(geojson)
  .attr("d",path);

console.log(d3.select("path").attr("d"));   
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

(The feature is heavily stripped down UK geojson, so that it fits in a snippet).