D3.js - массив данных JSON связывает один и тот же элемент массива со всем

Я загружаю файл данных GeoJSON, содержащий массив объектов, каждый объект, содержащий векторную информацию для другого контура страны. Тот же элемент массива привязан к каждому элементу DOM. Я уже сталкивался с этой проблемой в JavaScript, но каждое изменение, которое я сделал, не вызвало ничего.

Я приложил jsfiddle. Я использую пример файла данных, который, кажется, занимает пару секунд, чтобы загрузить.

Мой код из jsfiddle выглядит так:

$(document).ready(function() {
  d3.json(
    "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson",
    function(error, data) {
      var myGeoJSON = data.features;

      for (i = 0; i < myGeoJSON.length; i++) {
        var path = d3.geo.path();
        var width = 960;
        var height = 600;
        var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

        svg.selectAll("path")
          .data(data.features)
          .enter().append("path")
          .attr("d",path)
          .attr("fill","#3e429a");
      }
    }
  );
});

ОТВЕТЫ

Ответ 1

Вам не нужно перебирать массив функций. Ваш файл данных представляет собой FeatureCollection, который D3 может рисовать, либо как один элемент пути:

svg.append("path").datum(data).attr("d", d3.geo.path());

или как отдельные элементы пути, по одному для каждой функции (страна):

svg.selectAll("path").data(data.features)
  .enter().append("path").attr("d", d3.geo.path())

По умолчанию D3 использует проекцию d3.geo.albersUsa(), которая выводит Гавайи в Мексику и Аляску только за пределы тропиков. Вы можете переключиться на равноугольную проекцию, чтобы увидеть весь мир:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.equirectangular();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    svg.selectAll("path")
      .data(data.features)
      .enter().append("path")
      .attr("d", path)
      .attr("fill", "#3e429a");
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>