Карта d3.js показывает пустую

это сводит меня с ума, я не знаю, где моя ошибка, в файле json (не похоже), коде, загружающем карту, или даже примененных цветах. я уже сравниваю с примером мира noob d3.js и это работает для меня, я просто заменяю координаты, файл карты json и тег для отображения моих областей, и вуаля, не работает, хе-хе.

Вот мой html+js:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: green;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<!--<script src="http://d3js.org/d3.v3.min.js"></script>-->
<!--<script src="http://d3js.org/topojson.v0.min.js"></script>-->
<script type="text/javascript" src="js/d3.v3.js"></script>
<script src="js/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
        .center([-3.5,40.5])
        .scale(40000)
//    .scale(900)
//    .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");


//d3.json("maps/world-110m2.json", function(error, topology) {
//d3.json("maps/prov_37.json", function(error, topology) {
//d3.json("maps/prov_40.json", function(error, topology) {
d3.json("maps/prov_28.json", function(error, topology) {
    g.selectAll("path")
//      .data(topojson.object(topology, topology.objects.countries)
//      .data(topojson.object(topology, topology.objects.prov_40)
//      .data(topojson.object(topology, topology.objects.prov_37)
      .data(topojson.object(topology, topology.objects.prov_28)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

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>

ну, мои файлы json, которые я пробовал в коде, вы можете скачать их здесь (а также файл html): тестовые файлы

Обратите внимание, что каждая из моих карт json имеет разные идентификаторы или теги для отображаемых областей, поэтому каждый раз, когда я переключаю карту json в коде HTML, я переключаюсь на правильный идентификатор/тег. Например, идентификатор карты «prov_28_topo.json» — «prov_28»:

},
"objects": {
    "prov_28": {
        "type": "GeometryCollection",
        "geometries": [{

d3.js map topojson
person miguelfg    schedule 25.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я просмотрел только один из ваших файлов json, prov_28_topo.json, и он недействителен в формате JSON.

У вас было {"type":"Topology","transform":{"scale":[0.0007357596319631963,0.0004301291039103907],"translate":[-4.57907617,38.02244023]},"objects":{"prov_28:{"type"

Так должно быть:

{"type":"Topology","transform":{"scale":[0.0007357596319631963,0.0004301291039103907],"translate":[-4.57907617,38.02244023]},"objects":{"prov_28":{"type"

Это цитата после _28. Изменив это, все заработало.

person Andy Thornton    schedule 25.06.2013
comment
Вы были правы, но из этого я понял, что настоящая проблема заключается в том, что я использовал одно и то же имя и для файла, и для идентификатора, а файл на самом деле другой, он заканчивается на «_topo». Я смотрел на него часами и не мог найти такой нубской ошибки. Спасибо!! - person miguelfg; 26.06.2013