Отображение .json map в D3 Javascript

Я сделал учебник по отображению карты в d3 с файлом world-50m.json. Однако я хочу использовать свой собственный json-файл. это структура моего .json-файла.Отображение .json map в D3 Javascript

"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"FID": 0.000000}, "geometry": {"type": "MultiPolygon" , "координат": [[[[141.415967, -15.837696] .... и координаты продолжаются.

Однако вызов в коде для старого мира-50m.json и да, я понимаю, что в данный момент код ссылающегося на мир-50m.json Я изменить это в мой файл:

data (topojson.feature (топология, topology.objects.countries)

Мой вопрос - какой вызов использовать для моего нового .json-файла. Я попытался использовать кучи комбинаций, но продолжаю получать ошибку. topology.objects undefined. Подходит на:

Адрес:

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



path { 
    stroke: white; 
    stroke-width: 0.25px; 
    fill: grey; 
} 


</style> 
<body> 
<script type="text/javascript" src="d3/d3.v3.min.js"></script> 
<script src="js/topojson/topojson.js"></script> 
<script> 


var width = 960, 
    height = 500; 

var projection = d3.geo.equirectangular() 
    .center([-30, -17 ]) 
    .scale(3000) 
    .rotate([-180,0]); 

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"); 

// load and display the World 
d3.json("json/world-50m.json", function(error, topology) { 
    g.selectAll("path") 
     .data(topojson.feature(topology, topology.objects.countries) 
      .features) 
    .enter() 
     .append("path") 
     .attr("d", path) 

    d3.csv("data/CairnsPort2012.csv", function(error, data) { 
     g.selectAll("circle") 
      .data(data) 
      .enter() 
      .append("circle") 
      .attr("cx", function(d) { 
       return projection([d.LONG, d.LAT])[0]; 
      }) 
      .attr("cy", function(d) { 
       return projection([d.LONG, d.LAT])[1]; 
      }) 
      .attr("r", 0.1) 
      .style("fill", "red"); 
    }); 

}); 

var zoom = d3.behavior.zoom() 
    .on("zoom",function() { 
     g.attr("transform","translate("+ 
      d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
     g.selectAll("path") 
      .attr("d", path.projection(projection)); 
}); 

svg.call(zoom) 


</script> 
</body> 
</html>

источник

2013-07-05 user2551999

ОК, сначала нам нужно разобраться с порядком вашего вызова, чтобы загрузить данные карты.

Нам нужно поставить второй вызов так, как надо.

d3.json("json/world-50m.json", function(topology, error) {

Тогда, я думаю, вам нужно изменить следующее:

g.selectAll("path") 
    .data(topojson.feature(topology, topology.objects.countries) 
     .features)

... до ...

g.selectAll("path") 
     .data(topology.features)

Я говорю, что это может работать на основе рабочей карты я здесь, что имеет очень похожий JSon макет

{"type":"FeatureCollection", 
    "features":[ 
    { 
    "type":"Feature", 
    "properties":{"name":"New Zealand","iso_a2":"NZ","iso_a3":"NZL","iso_n3":"554"}, 
    "geometry":{"type":"MultiPolygon","coordinates":[ [ [ [ 167.44947350400005, -47.23943450299987 ], ....and the coordinates go on ] ] ] ]}} 
    ] 
}

. .. и следующий код.

var g = svg.append("g"); 

d3.json("json/nz-10m2.json", function (topology, error) { 
    g.selectAll("path") 
     .data(topology.features) 
     .enter() 
     .append("path") 
     .attr("d", path); 
});

источник

2013-07-05 04:12:49 d3noob

Хорошо, поэтому я сделал исправления, как указано выше. Сначала я столкнулся с ошибкой typeerror: топология равна нулю. Хотя это может быть связано с переключением ошибок и топологии, поэтому я попробовал функцию (ошибку, топологию), и у меня больше не было никаких ошибок в консоли, однако моя карта не отображалась, я просто столкнулся с пустой страницей. Есть идеи? – user2551999

Обновление: он работал с функцией (ошибка, топология). Не знаю, почему, может быть, ты знаешь больше меня. Но карта не показывалась (это была хорошая карта). Создал новую карту из .shp, используя ogr2ogr. И все получилось отлично. Спасибо за помощь d3noob. Я многому научился за короткий промежуток времени, оценил. – user2551999

Отличные новости. Интересно об ошибке и топологии. У меня есть версия, которая требует другого. Странный. Хорошо сделано, работая через него. – d3noob

Отображение .json map в D3 Javascript

ответ

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