Как я могу масштабировать карту, чтобы она соответствовала размеру моего SVG с данными пути d3 и geojson? - PullRequest
Новая
       66

Как я могу масштабировать карту, чтобы она соответствовала размеру моего SVG с данными пути d3 и geojson?

1 голос
/ 03 мая 2019

Я пытаюсь создать d3 SVG, которая рисует карту штата Нью-Йорк и масштабирует ее так, чтобы она соответствовала размеру моего SVG, проблема, с которой я сталкиваюсь, заключается в том, что при использовании .fitSize([height, width], mapObject) она возвращает только NaN ошибка в консоли.

файл topoJSON NYS Я использую

Я могу заставить карту отображаться без масштабирования, но, конечно, она не оптимизирована и нуждается в масштабировании

Я пытался сказать то, что сказано в этом сообщении , но я не нашел правильного решения 

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

1 Ответ

1 голос
/ 03 мая 2019

Проблема в том, что fitSize принимает геойсон объект , в то время как selectAll.data () принимает массив , вы используете один из этих двух для обоих в 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 в fitSize, мы все продолжаем проецировать, и, посколькуgeoData все еще является массивом, мы можем передать его в selectAll.data () без изменений.

Вот блок.

Решение 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]) для ввода одного объекта для всех путей).

Вот блок.

Оба блока нарисованы в правильном масштабе - карта превышает границы блоков, так как я не изменил ваши размеры 800x800

...