javascript - D3 投影未设置 cx 属性

Question

我有一张美国 map ，我正在尝试显示纬度/经度点。为了达到这个目的，我已经将几个例子混在一起了，但我遇到了困难。我的点位于 csv 文件中，我不知道如何在此处上传，但它只有 65,000 行数字对。例如31.4671154，-84.9486771。

我主要遵循 Scott Murray 的书 here 中的示例.

我使用的是 Albers USA 投影。

var projection = d3.geo.albersUsa()
.scale(1200)
.translate([w / 2, h / 2]);

并将地标设置为附加到 map 容器的 svg 组。

var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
.on("click", stopped, true);

svg.append("rect")
.attr("class", "background")
.attr("width", w)
.attr("height", h)
.on("click", reset);                            

var g = svg.append("g");
var landmarks = svg.append("g")

我读取数据并尝试在每个纬度/经度点设置圆圈。

d3.csv("./public/assets/data/landmark_latlon_edited.csv", function(error, latlon){
console.log(latlon);
landmarks.selectAll("circle")
  .data(latlon)
  .enter()
  .append("circle")
  .attr({
    'fill': '#F00',
    'r': 3
  })
  .attr('cx', function(d){
      return projection([d.lon, d.lat][0]);
    })
  .attr('cy', function(d){
    return projection([d.lon, d.lat])[1];
  })
  .style({
    'opacity': .75
  });

});

现在，问题是 cx 属性没有接收值。在检查器中查看时，圆圈不显示 cx，并且确实出现在 svg 中适当的 y 值处，但出现在 x=0 处的堆叠列中。

<circle fill="#F00" r="3" cy="520.8602676002965" style="opacity: 0.75;"></circle>

我发现了一个我认为可能相关的旧问题 here其中指出，如果您尝试向投影方法提供其正常边界框之外的值，则投影方法将返回 null。我在 Tableau 中打开 csv，看到几个位于加拿大或太平洋中部的美国领土(不是夏威夷)的几个值，我删除了这些值，但这并没有解决问题。

我绝对是新手，我确信我错过了一些明显的东西，但如果有人能帮助我弄清楚在哪里看，我将不胜感激。给你带来很多积极的氛围。如果我可以添加任何内容来澄清问题，请告诉我。

谢谢， 布赖恩

Answer 1

当我更新到 d3 v3.5.6 时，我遇到了同样的问题。以下是我检查 null 值的方法，这样您就不会尝试访问 null 的 [0] 位置:

.attr("cx", function(d) {
        var coords = projection([d.lon, d.lat]);
        if (coords) {
            return coords[0];
        }
})

我确信有一种更干净的方法可以做到这一点，但它对我有用。