Question

我试图在d3中绘制美国地图上的一堆点，并且绘图位置与它们应该基于lat-long的位置略有不同。

我正在使用https://d3js.org/us-10m.v1.json来绘制状态边界，我理解（从此https://github.com/topojson/us-atlas#us/10m.json）基于d3的geoAlbers投影。所以我正在使用d3的geoAlbers投影来绘制点的长度，但他们并没有在正确的位置绘图（参见jsfiddle，波士顿在纽约州北部绘图）。我怀疑这个问题与投影有关，但我不能把手指放在它上面。

JSFiddle：https://jsfiddle.net/Robmattles/n1cdxkna/12/

var width = 960; var height = 600;

var projection = d3.geoAlbersUsa();

var path = d3.geoPath();

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

d3.json("https://d3js.org/us-10m.v1.json",function(error,us) {
      states = topojson.feature(us, us.objects.states).features
    svg.append("g")
      .attr("class", "states")                  
      .selectAll("path")
      .data(states)
      .enter()
      .append("path")
      .attr("d", path)
      .style('fill','yellow')

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

    svg.append("circle")
    .attr("cx", function() { return projection([-71.0589,42.3601])[0];})
    .attr("cy", function() { return projection([-71.0589,42.3601])[1];})
    .attr("r",6)
    .attr("class","source-port");

svg.append("text")
    .attr("x", function() { return projection([-71.0589,42.3601])[0] + 5;})
    .attr("y", function() { return projection([-71.0589,42.3601])[1] + 0;})
    .text("Boston");


});

使用geoAlbers和D3 / topojson的us-10m.v1.json在D3上绘制地图上的点

0 个答案: