D3.js - json файл не загружается

Я новичок в D3.js и пытаюсь загрузить json-файл. Я последовал за учебник, и я использую следующий код:D3.js - json файл не загружается

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
<title>D3 World Map</title> 
<style> 
    path { 
    stroke: white; 
    stroke-width: 0.5px; 
    fill: black; 
    } 
</style> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/topojson.v0.min.js"></script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     var width = 900; 
     var height = 600; 

    var projection = d3.geo.mercator(); 

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

    d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) { 
     g.selectAll("path") 
     .data(topology.features) 
     .enter() 
     .append("path") 
     .attr("d", path) 
    }); 
</script>

Структура моего файла JSON выглядит следующим образом:

{ «типа»: «Функция», «свойства» : {«РЕГИОН»: «Южный регион», «REG_CODE»: «03», «DIVISION»: «Cork West», «DIV_CODE»: «0319», «DISTRICT»: «Bandon», «DIST_CODE»: «4300A «SUB_DIST»: «Kinsale», «SUB_IRISH»: «Cionn tSáile», «SUB_CODE»: «4305B», «COUNTY_1»: «Cork», «COUNTY_2»: null, «GEOGID»: «M4305B», Male2011 ": 5765," Female2011 ": 5963," Total2011 ": 11728," PPOcc2011 ": 4054," Unocc2011 ": 1177," Vac ant2011 ": 1013," HS2011 ": 5231," PCVac2011 ": 19.4," CREATEDBY ":" Paul Creaner "}," geometry ": {" type ":" Polygon "," coord ": [[[154039.34449999966, 50090.991299999878] ], [154039.8311, 50105,332900000736], [154041,9757000003, +50130,335699999705]

и так далее с длинным списком координат

Однако когда я загрузить этот HTML-файл, я просто получаю пустой экран. Я проверил консоль и не получаю ошибок (я раньше был и решил их).

Может ли кто-нибудь помочь? Любая помощь очень ценится.

спасибо.

источник

2016-11-06 Maeve90

Итак, что именно вы хотите получить из json-файла? Координаты? И могли ли вы отправить ссылку на тут? – FutureCake

Я хочу, чтобы иметь возможность просматривать карту, используя D3.js (с целью создания карты тепла в будущем, но просто пытаюсь заставить основы работать в данный момент). Как вы относитесь к отправке ссылки на tut ? Спасибо за вашу помощь. – Maeve90

Первая ошибка, указанная в [ответ] @ cojack [answer] (http://stackoverflow.com/a/40454168/4235784), является неправильным использованием аргументов. Вторая и, возможно, третья ошибка, как представляется, вызваны форматом файла и используемой проекцией. Мой ответ на [* "D3.js - Точки рисования на карте не могут возникнуть из-за неправильной проекции *) (/ q/34497878) могут помочь в решении этого. – altocumulus

Во-первых, cojack's answer - первая часть ответа.

Во-вторых, ваш geojson не использует WGS84, вместо этого он использует проецируемое координатное пространство. D3 требует WGS84 или длинных пар длин. Таким образом, это приведет к ошибкам, когда D3 попытается проецировать его на координатное пространство SVG. Вам придется перепрограммировать geojson, чтобы использовать его в d3. Вам нужно будет знать, какая проекция использует данные в настоящее время, чтобы перепрограммировать ее.

В-третьих, после того, как вы сможете проектировать без ошибок, параметры проекции можно изменить так, чтобы ваша карта была центрирована и правильно масштабирована над вашими данными. На проекции Меркатора

projection.scale(number).center([longitude,latitude]);

должно быть достаточно, чтобы правильно масштабировать и центрировать карту.

Я поменял geojson на другой, и у меня не было проблем с отображением данных на основе плунжера в комментарии койка (plunker, требуется момент для загрузки geojson).

источник

2016-11-06 21:19:12

Хорошее место, указывающее на проецируемое координатное пространство - я не понимал, что D3.js должен быть в формате long long. Я попробую это и, надеюсь, это решит проблему. благодаря – Maeve90

Прежде всего, данные json неверны. Синтаксис вашего json не завершен. Затем вы не согласны с порядком аргументов, первая ошибка в обратном вызове, а не в данных. Поэтому, когда вы измените его, он будет работать, как вы exptected. От:

d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) {

To:

d3.json("Census2011_Garda_Subdisticts.json", function(error, topology) {

Не забудьте проверить ошибку, если существует и реагировать на них.

С уважением.

источник

2016-11-06 20:27:58 cojack

Спасибо за ваше предложение. Я попытался изменить порядок, и у меня все еще нет отображения карты и ошибок в консоли. Любые другие идеи? – Maeve90

Я создал Plunker для вашего вопроса: http://plnkr.co/edit/bdPdAA01aEGYZgG7Z05A?p=preview и для меня это «что-то», но не появляется, а в консоли у меня есть ошибка, связанная с самой d3. Но я не знаю эту библиотеку. Я просто выясняю логическую проблему в вашем коде. – cojack

D3.js - json файл не загружается

ответ

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