如何使用D3和Geojson路径数据缩放地图以适合我的SVG尺寸

Question

我正在尝试创建一个d3 svg，该d3 svg绘制纽约州的地图并缩放它，以便它适合我的SVG的大小，我所遇到的问题是，当我使用时.fitSize([height, width], mapObject)它仅返回控制台中的NaN错误。

我正在使用

的NYS的Topojson文件

我能够在不缩放的情况下显示地图显示，但是当然，它不是优化的，需要缩放

我尝试了这篇文章中所说的内容，但我还没有找到正确的解决方案

var map = d3.json('./ny.json')
Promise.all([map]).then(data => {
  var height = 800;
  var width  = 800;
  var mapData = data[0]
  // original geoJSON to that works without scaling 
  // var geoData = topojson.feature(mapData, mapData.objects["cb_2015_new_york_county_20m"]).features
  //
  var geoData = topojson.feature(mapData, {
    type:"GeometryCollection",
    geometries: mapData.objects["cb_2015_new_york_county_20m"].geometries,
  })
  var projection = d3.geoMercator()
                     .fitSize([width, height], geoData)
  var path = d3.geoPath()
               .projection(projection)
  d3.select('svg')
    .attr('height', height)
    .attr('width', width)
    .selectAll('.county')
      .data(geoData)
      .enter()
      .append('path')
        .classed('.county', true)
        .attr('d', path)
})

我很确定这是我的格式错误，但是我不确定哪些数据.fitSize()或.fitExtent()试图与之比较。

现在，我收到的代码网站的方式未输出到控制台，但我也没有附加数据附加到SVG

Answer 1

问题是，fitsize采用geojson object 而selectall.data((采用 array ，您正在使用其中之一geoData中的两个。这留下了两种解决方案：

解决方案1：

如果我们使用

var geoData = topojson.feature(mapData, mapData.objects["cb_2015_new_york_county_20m"]).features
var projection = d3.geoMercator()
                 .fitSize([width, height], geoData)

我们会遇到NAN错误，因为由于我们没有传递Geojson对象，只是一个Geojson对象，因此投影无法正确设置。我们可以通过使用geoData进行功能集来解决此问题，然后将其传递给Fitsize：

var geoData = topojson.feature(mapData, mapData.objects["cb_2015_new_york_county_20m"]).features
var projection = d3.geoMercator()
     .fitSize([width, height], {type:"FeatureCollection", features: geoData})

现在，我们将Geojson功能集合传递给拟合，我们都进行了投影，并且由于geoData仍然是一个数组，我们可以将其传递给selectall.data((不变。

。

这是一个块。

解决方案2：

如果我们使用：

var geoData = topojson.feature(mapData, {
  type:"GeometryCollection",
  geometries: mapData.objects["cb_2015_new_york_county_20m"].geometries,
})

我们获得了一个Geojson对象，Profot.Fitsize Works，但是selectAll().data(geoData)没有添加任何功能，因为它不是数组 - Enter选择是空的。我们可以在selectAll().data(geoData.features)中替换来解决此问题并输入每个功能(或者，我们可以使用.data([geoData])对所有路径输入一个功能(。

这是一个块。

两个块都以正确的比例绘制 - 地图超过了块边界，因为我没有更改您的800x800尺寸