问

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

红山村樵夫_799 发布于 2023-02-06 13:02

json

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

再一次,我没有错误..它只是不起作用.

1 个回答

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

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

他提到一些非常重要的东西,"......这些点来自一个包含0和1列(经度和纬度)的CSV文件......"

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

2023-02-06 13:04 回答

SuperBaby蜜

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签