Путь topojson не рисован в браузере

Я хочу отобразить карту с d3, но путь не отображается в браузере, хотя в инструментах разработчика я вижу, что файл topojson загружен, поэтому есть данные для пути. Я просто получаю пустую страницу. В чем может быть проблема?Путь 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); 
});

источник

2015-12-10 maidi

Вам необходимо установить проекцию. –

Что это значит? – maidi

Вы вызываете '.projection (null)'. Вам нужно установить одну из проекций D3. –

ответил Ваш вопрос основан на комментарий Ларса, „Вы вызываете .projection (нуль). Вам необходимо установить один из выступов D3 там“? Несколько вариантов проекции, перечисленных ниже. Вы также можете проверить и убедиться, что ваш сервер может запускать файлы .topojson. См How to allow download of .json file with ASP.NET

Extension: .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

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

источник

2015-12-12 18:14:59

ответ

Смежные вопросы