3

I'm plotting points on a US Map with TopoJSON. I think my data is formatted correctly, everything is loading, the states are showing... but I have no points. The console has no errors. Here is my script: 

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

And my data looks like: 

{
    "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" : []
}

Again, I get no errors.. it just doesn't work.

4

1 回答 1

7

我想回答这个问题，以便像我这样的其他人可以解决这个问题。

根据 user1614080 的建议，我的问题是错误的。因为我只想在地图上绘制经纬坐标，所以我需要使用 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

他提到了一些非常重要的事情，“......这些点来自一个包含 0 和 1 列（经度和纬度）的 CSV 文件......”

我没有意识到 tsv 文件顶部的 0 1 映射到 long 和 lat。一旦我意识到我的坐标是倒退的，我就固定了并prezto。有效。

于 2014-01-09T16:29:40.920 回答