Question

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

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

我已经尝试过post中的内容，但是我没有找到正确的解决方案

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 ，您在{{1} }。剩下两个解决方案：

解决方案1：

如果我们使用

geoData

我们收到NaN错误，因为投影没有正确设置，因为我们没有传递geojson对象，而只是传递geojson对象的数组。我们可以通过使用var geoData = topojson.feature(mapData, mapData.objects["cb_2015_new_york_county_20m"]).features var projection = d3.geoMercator() .fitSize([width, height], geoData)创建要素集合并将其传递给fitSize来解决此问题：

geoData

现在我们将geojson特征集合传递给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})仍然是数组，我们可以将其不变地传递给selectAll.data（）。

Here's a block.

解决方案2：

如果我们使用：

geoData

我们得到了一个geojson对象，projection.fitSize可以工作，但是var geoData = topojson.feature(mapData, { type:"GeometryCollection", geometries: mapData.objects["cb_2015_new_york_county_20m"].geometries, })并没有添加任何功能，因为它不是数组-输入选择为空。我们可以用selectAll().data(geoData)代替来解决此问题，并为每个要素输入一个路径（或者，可以使用selectAll().data(geoData.features)为所有路径输入一个要素）。

Here's a block.

两个块均以正确的比例绘制-由于我没有更改您的800x800尺寸，地图超出了块边界

如何缩放地图以使dv和geojson路径数据适合我的svg大小

1 个答案: