Путь к топойсону не отображается в браузере

Я хочу отобразить карту с d3 но путь не рисуется в браузере, хотя в инструментах разработчика я вижу, что файл topojson загружен, поэтому данные для пути есть. Я просто получаю пустую страницу. В чем может быть проблема?

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
height = 600;

var path = d3.geo.path()
    .projection(null);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("build/immoscout.topojson", function(error, us) {
  if (error) return console.error(error);

  svg.append("path")
      .datum(topojson.mesh(us))
      .attr("d", path);
});


d3.js geojson topojson
person maidi    schedule 10.12.2015    source источник
comment
Вам нужно установить проекцию.   -  person Lars Kotthoff    schedule 10.12.2015
comment
Вы звоните .projection(null). Вам нужно установить одну из проекций D3.   -  person Lars Kotthoff    schedule 10.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

Ответ на ваш вопрос основан на комментарии Ларса: «Вы вызываете .projection(null). Вам нужно установить там одну из проекций D3»? Несколько вариантов проекции перечислены ниже. Вы также можете проверить и убедиться, что ваш сервер может запускать файлы .topojson. См. раздел , как разрешить загрузку файла .json с помощью ASP. НЕТТО

  • Расширение: .json
  • MIME-тип: приложение/json
  • Расширение: .geojson
  • MIME-тип: приложение/json
  • Расширение: .topojson
  • MIME-тип: приложение/json

1) Проекция Моллвейде показывает весь мир

var width = 500;
var height = 500;
var projection = d3.geo.mollweide()
    .scale(120)
    .translate([width / 2, height / 2]);
var geoPath = d3.geo.path().projection(projection);

2) Проекция Меркатора, которая стала стандартной для Google Maps.

var width = 500;
var height = 500;
var aProjection = d3.geo.mercator()
        .scale(80)//80 works well in this case
        .translate([width / 2, height / 2]);
var geoPath = d3.geo.path().projection(aProjection);//d3.geo.path() defaults to albersUSA, which is a projection suitable only for maps of the United States

`

person Justin Wilson    schedule 12.12.2015