Javascript 使用d3js向地图添加标签

我正在尝试使用d3js创建地图，并用特定属性标记点要素。下面是我尝试过的代码，但标签似乎不起作用

在尝试添加标签时，我可能做错了什么。谢谢

.土地{
行程：#ff0f00；
填充：无；
}
.国家边界{
填充：无；
行程：#000fff；
}
.标签{
填充：#444；
字体系列：arial；
字体大小：0.7em；
}
正文{
字体：12px无衬线；
文本锚定：中间；
}
可变宽度=1000，
高度=900；
var projection=d3.geo.albers（）
.比例尺（1000）
.翻译（[宽度/2，高度/2]）；
var path=d3.geo.path（）.projection（projection）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“http://bl.ocks.org/mbostock/raw/4090846/us.json，函数（错误，美国）{
如果（错误）抛出错误；
svg.insert（“路径”，“分划”）
.datum（topojson.feature（us，us.objects.land））
.attr（“类别”、“土地”）
.attr（“d”，路径）；
svg.insert（“路径”，“分划”）
.datum（topojson.mesh（us，us.objects.states，函数a，b）{
返回a！==b；
}))
.attr（“类别”、“州边界”）
.attr（“d”，路径）；
});
d3.csv（“nfl_teams.csv”），函数（错误、数据）{
svg.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回投影（[d.经度，d.纬度]）[0]；
})
.attr（“cy”，函数（d）{
返回投影（[d.经度，d.纬度]）[1]；
})
.attr（“r”，15）
.style（“填充”、“无”）
.风格（“笔画”、“红色”）；
svg.selectAll（“.labels”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.text（函数（d）{return d.properties.Team；}）
.attr（“x”，函数（d）{
返回投影（[d.经度，d.纬度]）[0]；
})
.attr（“y”，函数（d）{
返回投影（[d.经度，d.纬度]）[1]；
})
});
d3.选择（self.frameElement）.style（“height”，height+“px”）；

由于这是您的CSV：

Team,Latitude,Longitude
Chicago,41.53,-87.38
Green Bay,44.3,-88.01

在

d3.csv

函数加载数据后，这将是您的数据数组：

[{
    Team: "Chicago",
    Latitude: "41.53",
    Longitude: "-87.38"
}, {
    Team: "Green Bay",
    Latitude: "44.3",
    Longitude: "-88.01"
},{
    ...
}]

如您所见，数据对象中没有任何名为

properties

的键。因此，解决方法很简单。而不是：

.text(function(d) { return d.properties.Team; })

应该是：

.text(function(d) { return d.Team; })

---

圆圈出现了吗？问题就在于标签？@GerardoFurtado圆圈出现得很好。这只是标签。在这种情况下，你能粘贴“nfl_teams.csv”吗？只有几行。@GerardoFurtado我已经把它附加在这里了。谢谢，修复方法很简单：它是

d.Team

，而不是

d.properties.Team

。