D3: карта с topojson не отображается должным образом

Я пытаюсь нарисовать svg-карту с d3 из файла topojson, но все, что у меня есть, это испорченные строки.D3: карта с topojson не отображается должным образом

Я использую большую часть кода, который я нашел на http://www.tnoda.com/blog/2013-12-07. Когда я использую файлы topojson с этого сайта, все работает нормально. Я, возможно, проблема в моем файле topojson, но когда я импортирую его в mapshaper, я получаю нормальную карту.

plnkr: http://plnkr.co/edit/TYiT5AoI29nEHC3Fre6D?p=preview

Вот мой код:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css" type="text/css">  
    <script src="//code.jquery.com/jquery-2.0.0.js"></script>  
    <script src="//d3js.org/d3.v3.min.js"></script> 
    <script src="//d3js.org/topojson.v1.min.js"></script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script src="script.js"></script> 
    </body> 
</html>

script.js

var m_width = $("#map").width(), 
    width = 800, 
    height = 500 

var projection = d3.geo.mercator() 
    .scale(105) 
    .translate([width/2, height/1.5]); 

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

var svg = d3.select("#map").append("svg") 
    .attr("width", m_width) 
    .attr("height", m_width * height/width); 

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

d3.json("zupanije.max.topo.json", function(error, us) { 
    g.append("g") 
     .attr("id", "states") 
     .selectAll("path") 
     .data(topojson.feature(us, us.objects.states).features) 
     .enter() 
     .append("path") 
     .attr("id", function(d) { return d.id; })  
     .attr("d", path) 
});

styles.css

#map { 
    background-color: #fff; 
    border: 1px solid #ccc; 
} 
.background { 
    fill: none; 
    pointer-events: all; 
} 
#states{ 
    cursor: pointer; 
    fill: #cde; 
    stroke: #fff; 
    stroke-linejoin: round; 
    stroke-linecap: round; 
} 
#states .active { 
    fill: #89a; 
} 
pre.prettyprint { 
    border: 1px solid #ccc; 
    margin-bottom: 0; 
    padding: 9.5px; 
}

источник

2015-03-12 ljerka

Это довольно артистично. Попробуйте свой код с исходными данными мира из вашего учебника ([здесь] (https://github.com/tomnoda/interactive_d3_map)), поэтому вы можете проверить, не сработает ли он на коде или на части данных. Установите масштаб до 150 (по умолчанию). – Hugolpz

Я уже пробовал его с исходными данными, и он отлично работает. Вот почему я предполагал, что что-то не так с моим файлом topojson, поэтому я импортировал его в http://www.mapshaper.org/, и у меня есть нормальная карта Хорватии (это то, что я пытался получить с d3) , Похоже, что данные в порядке. Btw - Я также попытался сыграть с масштабом, установив его на 150, 50, 1000 и т. Д., Но это не помогло. Также с центром. Но все, что у меня было, это еще один художественный образ :) – ljerka

Следуйте этому Q/A о Гане, обратитесь в Хорватию, нужно ехать быстрее. http://stackoverflow.com/q/28556524/1974961 – Hugolpz

У меня была одна и та же проблема, и я потратил часы на повторное преобразование моего файла SHP в GeoJSON/Topojson в командной строке с разными настройками. Решение довольно простое! - Получить QGIS здесь: https://www.qgis.org/en/site/forusers/download.html - открыть файл SHP или GeoJSON файл - Выберите слой, который вы хотите экспортировать - Перейти к Layer> Сохранить как - Формат: GeoJSON - КСО: WGS 84, EPSG: 4326 - Сохранить.

Наслаждайтесь!

источник

2015-06-11 18:10:40 apathetique

Jup, я использую QGIS и topojson в своем проекте http://arda-maps.org. Это довольно простое и простое сочетание технологий. Убедитесь, что вы используете правильную проекцию. В моем случае это не так важно, потому что я создаю собственный мир. Что вы хотите иметь в конце? Собственный мир или существующая проекция? – kwoxer

Я импортировал файл shp, пошел в layer> save as> ok, и он дал мне ошибку: «Ошибка OGR: не удалось создать источник данных GeoJSON: proba.geojson». Кроме того, это огромная программа с множеством возможностей, которые новичок, как я, не знает, как использовать.Мне нужна программа, которая проста и фиктивна для тех, кто не создает ГИС, а вместо этого получает данные от кого-то, кто это делает, и просто хочет правильно экспортировать его в topojson. В этой программе я даже не могу найти, как экспортировать в topojson. Это дает мне только опцию geojson. – ljerka

D3: карта с topojson не отображается должным образом

ответ

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