javascript - 无法将坐标解析/投影到 JSON 上

Question

我只是想在 json map 上绘制一堆圆圈，并根据我通过解析的纬度和经度坐标使用动态 cx 和 cy 属性csv。

无论如何，我已经很长一段时间没有遇到过这个问题了，几乎是从我刚刚接触 d3 开始。我通读了所有相关的帖子，我回顾了初学者的教程(没有羞耻)，但我仍然无法发现我做错了什么。请看一下，很短，重点是67-68行。您可以在这里找到我的 json map :

http://bl.ocks.org/diggetybo/a2ace75c8ea89ab0da996154d3df7f5c

您会注意到，没有附加圆圈。据我所知，我开始以正统的 D3.js 方式附加圆圈:

1. 创建一个空选择。
2. 将数据绑定(bind)到 dom
3. 附加数据中的视觉效果

如果我做了一些愚蠢的事情，无论如何，请把它灌输给我——我心理很强大，我可以接受。

Answer 1

您的数据包含一些不在 AlbersUSA 投影明确定义区域内的坐标。更多详情请看我的answer至 "D3 albersUsa projection funtion return null" 。因为投影将为这些返回 null，所以您会收到错误，这会破坏圆的创建。

一个简单的方法是过滤掉无效的坐标:

var data = rawData.map(function(d)
{
    return {
        Latitude: +d.latitude,
        Longitude: +d.longitude,
        Place: d.place
    };
})
.filter(d => projection([d.Longitude, d.Latitude]));   // filter out null values

这将display the circles在 map 上。但是，您可能需要先检查数据并尝试事先筛选出它们。