Question

我有一张美国地图，我试图显示纬度/经度值。我把几个例子捣碎在一起，但是我已经碰到了一堵墙。我的观点是在csv文件中，我不确定如何在此处上传，但它只有65,000行数字对。例如31.4671154，-84.9486771。

我主要关注Scott Murray的书here中的例子。

我正在使用Albers USA投影。

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

将地标设置为附加到地图容器的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

您的函数生成cx值时会出现一些错误，这些错误会让您感到困惑。这只是错误地方的一个括号：

.attr('cx', function(d){
    return projection([d.lon, d.lat][0]);
})

通过编码[d.lon, d.lat][0]，您只是将数组的第一个值d.lon传递给投影，并返回projection()的结果，即数组。相反，您必须将[0]放在projection()的调用之外，因为您想要访问它返回的值。检查您的功能是否cy。如下调整它应该会产生cx的正确值：

.attr('cx', function(d){
    return projection([d.lon, d.lat])[0];
})

D3投影没有设置cx属性

1 个答案: