如何缩放地图以使dv和geojson路径数据适合我的svg大小 [英] How can I scale my map to fit my svg size with d3 and geojson path data

问题描述

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

I am trying to create a d3 SVG that draws a map of New York State and scale it so that it fits the size of my SVG, the issue I am having is that when I use .fitSize([height, width], mapObject) it only returns a NaN error in the console.

纽约正在使用的topoJSON文件我正在使用

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

I am able to get the map to display without scaling but of course, it is not optimized and needs to be scaled

我尝试了此帖子中所说的内容但我还没有找到正确的解决方案

I have attempted what is said in this post but I have not figured out the correct solution

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()试图比较什么数据反对.

I am pretty sure this is a formatting error on my part, but I am unsure of what data .fitSize() or .fitExtent() is trying to compare against.

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

right now the way the code site I receive no error outputted to the console but I also have no data append to the SVG

推荐答案

问题是，fitSize接受geojson object ，而selectAll.data()接受 array ，您正在 geoData 中使用这两者之一.剩下两个解决方案:

The issue is that fitSize takes a geojson object while selectAll.data() takes an array, you are using one of these two for both in geoData. This leaves two solutions:

解决方案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来解决此问题:

We get NaN errors because the projection is not set properly as we aren't passing a geojson object, just an array of geojson objects. We could solve this by making a feature collection with geoData and passing that to 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特征集合传递给fitSize，我们都在进行投影，并且由于 geoData 仍然是数组，我们可以将其不变地传递给selectAll.data().

Now we are passing a geojson feature collection to fitSize, we're all go on the projection, and since geoData is still an array, we can pass that to selectAll.data() unchanged.

这是一个块.

解决方案2:

如果我们使用:

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

我们得到了一个geojson对象，projection.fitSize有效，但是 selectAll().data(geoData)并没有添加任何特征，因为它不是数组-输入选择为空.我们可以替换为 selectAll().data(geoData.features)来解决此问题，然后为每个要素输入一个路径(或者，我们可以使用 .data([geoData])为所有路径输入一个特征.

We get a geojson object, projection.fitSize works, but selectAll().data(geoData) doesn't add any features as it isn't an array - the enter selection is empty. We can substitute in selectAll().data(geoData.features) to solve this and enter one path per feature (alternatively we could use .data([geoData]) to enter one feature for all the paths).

这是一个块.

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

这篇关于如何缩放地图以使dv和geojson路径数据适合我的svg大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！