javascript - d3 fitSize 给出 NaN 值

Question

我想让我的 d3 map 适合使用动态宽度和高度属性创建的 svg 容器。到目前为止，它通过使用以下代码起作用:

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)

   }

如果我用 fitSize() 替换投影函数，我的路径将以 NaN 值呈现。

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

这是我的 geojson 的示例。它是带有经纬度对的未投影数据。

{
"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],
        ...

到目前为止还找不到我的错误。提前致谢!

Answer 1

您需要将单个 geojson 对象传递给 .fitSize，而不是特征数组。

API 文档指出，.fitExtent (.fitSize 是 .fitExtent 的细微修改):

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

(documentation)

因此，传递一组功能:bw.features(或在我的代码片段中，geojson.features)将不起作用:

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>

但是，使用整个特征集合来适应大小应该:

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>

(该功能被大量剥离了 UK geojson，以便它适合一个片段)。