Почему мои точки широты и долготы TopoJSON не отображаются на моей карте США?

Я рисую точки на карте США с помощью TopoJSON. Я думаю, что мои данные отформатированы правильно, все загружается, состояния отображаются... но у меня нет баллов. В консоли ошибок нет. Вот мой сценарий:

var width = 800,
height = 500;

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([420, height / 2]);

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

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

queue()
    .defer(d3.json, "../us.json")
    .defer(d3.json, "../users.json")
    .await(ready);

function ready(error, us, users) {
  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

     svg.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b;    }))
          .attr("class", "states")
          .attr("d", path);


    svg.append("path")
          .datum(topojson.feature(users, users.objects.users))
          .attr("class", "points")
          .attr("d", path);
};

И мои данные выглядят так:

{
    "type": "Topology",
    "transform": {
        "scale": [
            0.032229964456445645,
            0.006392461796179619
        ],
        "translate": [
            -176.6460306,
            7.367222
        ]
    },
    "objects": {
        "users": {
            "type": "MultiPoint",
            "coordinates": [[-121.3806, 38.0213], 
                            [-69.726226, 44.275051],
                            ...long JSON file...
                           ]
                 }
         },
    "arcs" : []
}

Опять же, я не получаю ошибок .. это просто не работает.


javascript json d3.js topojson
person Gina    schedule 06.01.2014    source источник
comment
Когда вы говорите, что ваши данные выглядят как ... и приводите пример, какой это набор данных? Это users.objects.users? Если это так, то выглядит так, как будто координаты не были переведены в формат topojson, что привело к неожиданному размещению этих точек. Также нет реального преимущества в топожсоне для координатных точек, так как набор данных будет такого же размера. Вместо этого вы можете использовать geojson, который немного проще создать, или просто иметь список пар координат.   -  person user1614080    schedule 06.01.2014
comment
@user1614080 user1614080 Да, я собираюсь использовать это как стратегию. Примерно как в этом примере: bl.ocks.org/mbostock/4360892   -  person Gina    schedule 06.01.2014
comment
Другой пример, который может быть ближе к тому, что вам нужно здесь   -  person user1614080    schedule 07.01.2014

Ответы (1)


arrow_upward
7
arrow_downward

Я хотел бы ответить на этот вопрос, чтобы другие, такие как я, могли понять это.

По предложению пользователя 1614080 я неправильно решил проблему. Поскольку я просто хотел нанести координаты широты и долготы на карту, мне нужно было использовать Geojson и наложить его на карту TopoJSON. Вот так:

var width = 900,
    height = 500;

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([460, height / 2]);

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

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

queue()
    .defer(d3.json, "../us.json")
    .defer(d3.tsv, "../long_lat.tsv")
    .await(ready);

function ready(error, us, long_lat) {
    if (error){
        console.log(error);
    }

  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

     svg.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
          .attr("class", "states")
          .attr("d", path);


     svg.append("path")
          .datum({type: "MultiPoint", coordinates: long_lat})
          .attr("class", "points")
          .attr("d", path)
          .style('fill', 'rgb(247, 150, 29)');
};

Обратите внимание, что в последнем блоке я добавляю длинные координаты широты с помощью geoJson, а не TopoJson. Однако мой график все еще не работал. И что еще более расстраивает, это не выдавало мне никаких ошибок. Я искал и искал в Интернете, пока не нашел эту тему с Bostock: https://groups.google.com/forum/#!topic/d3-js/rxs-g6ezPwY

Он упоминает что-то очень важное: "...точки берутся из CSV-файла со столбцами 0 и 1 (долгота и широта)..."

Я не понял, что 0 1 в верхней части файла tsv сопоставляется с долготой и широтой. Как только я понял, что у меня были координаты задом наперед, я исправил и презто. Это сработало.

person Gina    schedule 09.01.2014