Нарисуйте карту региона США, используя D3 и угловой 6

Question

Мне нужно нарисовать карту региона США в D3.Должно быть что-то похожее на это.

Я беру ссылку с этой карты США , которая показывает данные с точки зрения состояния.И я могу создать эту диаграмму состояния, используя D3 и угловой 6. Но

• Как получить геойсон или топойсон для данных по регионам.

• Я не нашел ни одного графика, использующего D3 для этого региона.

• Какой из них будет полезен geoJson или topojson.(Согласно моему пониманию и этой статье это будет топойсон.)

• Я не получаю никакого подхода к этому,

РЕДАКТИРОВАТЬ: Я могу создать диаграмму региона, используя подход, который andrew упоминается. Я тоже хочу создать контуры состояний , но понятия не имею об этом.Ниже представлен подход, который я использовал.

const svg = d3
  .select('#statesvg')
  .attr('viewBox', '0 0 960 600')
  .attr('width', this.width)
  .attr('height', this.height);
this.getUSData().subscribe(us => {
  svg
    .selectAll(undefined)
    .data(this.uRegionPaths)
    .enter()
    .append('path')
    .attr('d', datum => {
      const feature = topojson.merge(
        us,
        us.objects.states.geometries.filter(state => {
          return datum.contains.indexOf(this.lookup[state.id]) > -1;
        })
      );

      return path(feature);
    })
    .attr('fill', d => {
      return this.sampleRegionData[d.name].color;
    })
    .attr('stroke', 'white')
    .attr('stroke-width', 3);
});

И это выглядит примерно так.на данный момент не хватает нескольких штатов (это не проблема)

Answer 1

Topojson преобразуется в geojson при передаче в d3.geoPath - вы можете использовать любой из них.Однако, так как API topojson предоставляет метод merge , у topojson есть ключевое преимущество: мы можем использовать файл topojson us.json в вашем примере, чтобы нарисовать карту.

Чтобы нарисовать коллекциюсостояний как одна функция, нам просто нужно объединить их в одну функцию.Для этого мы используем:

topojson.merge(us, us.objects.states.geometries.filter( /* some test */ )

Где мы тестируем каждое состояние, чтобы увидеть, принадлежит ли оно в данный регион.Эта строка возвращает объект геойсона, содержащий объединенные объекты топойсона.Затем мы можем передать это в d3.geoPath.

Чтобы работать с файлом us.json, на который ссылается ваш пример, нам нужно рассмотреть, как (и если) состояния идентифицируются в данных.

Файл us.json не сопровождается сопутствующим описанием его метаданных, но я могу сказать, что идентификатором каждого состояния является числовой код FIPS .Поэтому, если мы не хотим указать регионы в числовом виде, нам нужно переводить между числом и аббревиатурой (или какой-либо другой узнаваемой формой).Я просто использую простой объект, чтобы получить аббревиатуру от номера FIPS:

var lookup = {
    "53" : "WA",
    "41" : "OR",
    "6" : "CA",
    // ...
}

И теперь мы можем указать регионы, например:

var regions = [
  {"name": "northwest", "contains":[ "WA","OR","CA" ] }
  // ...
];

Теперь мы можем нарисовать наши регионы:

var lookup = {
    "53" : "WA",
    "41" : "OR",
    "6" : "CA",
    // ...
}

var regions = [
  {"name": "northwest", "contains":[ "WA","OR","CA" ] }
  // ...
];

d3.json("us.json").then(function(us) {
  svg.selectAll(null)
    .data(regions)
    .enter()
    .append("path")
    .attr("d", function(region) {
      var feature = topojson.merge(us, us.objects.states.geometries.filter(function(state) { 
         return region.contains.indexOf(lookup[state.id]) > -1; 
       }))
       return path(feature);
    })
});

Если вы тоже хотите наброски штатов - просто нарисуйте штаты в дополнение к регионам. Вот западное побережье , используя описанный выше метод, чтобы нарисовать дополнительные регионы, просто добавьте их в массив регионов (при этом добавив необходимые коды состояния в объект поиска).