Question

我正在使用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" : []
}

再次，我没有错误..它只是不起作用。

Answer 1

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

根据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附加我的lat长坐标。但是，我的图表仍然不起作用。更令人沮丧的是，它没有给我任何错误。我看了看网上，直到我找到了Bostock的这个帖子： https://groups.google.com/forum/#!topic/d3-js/rxs-g6ezPwY

他提到一些非常重要的事情， “......点数来自CSV文件第0列和第1列（经度和纬度）......“

我没有意识到tsv文件顶部的0 1映射到long和lat。一旦我意识到我的坐标向后，我就修好了prezto。有效。

为什么我的TopoJSON拉杆和长点不显示在我的美国地图上？

1 个答案: