d3.js - TopoJSON ‹‹properties››字段，如何用d3.js取值？

Question

我有 TopoJSON 文件，它看起来像这样:

{"type":"Topology","transform":{"scale":[0.03600360003702599,0.00406745806540​​71245],"translate":[-179.9999967702229,41.18684289776669],"objects":{"country": {“type”:“GeometryCollection”，“geometries”:[{“type”:“Polygon”，“arcs”:[[0]]，“properties”:{“AREA”:29809500，“PERIMETER”:21822.4， “区域”:“XYZ”}}，...

我想在我的 d3.js 代码中使用属性值 ("AREA","PERIMETER","re​​gion")。我尝试获取一些值，但没有成功:

d3.json("map_topo.json", function(error, map) {
svg.append("path")
.datum(topojson.object(map, map.objects.country).geometries)
.attr("d", path)
.style("fill", function(d) {
if (d.properties.region == "XYZ")
 {return "red"}
else {return "gray"}
})  

我做错了什么？

UPD:问题在@ChrisWilson 的帮助下得到解决，问题在于附加一个 路径，而不是选择所有 路径。工作代码(用于 topojson.v0.js):

d3.json("map_topo.json", function(error, map) {
svg.selectAll("path")
.data(topojson.object(map, map.objects.country).geometries)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) {
if (d.properties.region == "XYZ")
{return "red"}
else {return "gray"}
}); 

对于 topojson.v1.js 使用 topojson.feature 方法(查看下面的注释)。

Answer 1

您似乎在制作一张大 map ，而不是一系列代表国家/地区的 path 对象。试试这个:

d3.json("map_topo.json", function(error, map) {
    svg.selectAll("path")
       .data(topojson.feature(us, us.objects.counties).features)
       .enter()
       .append("path")
       .attr("d", path)
       .style("fill", function(d) {
           if (d.properties.region == "XYZ")
               {return "red"}
           else {return "gray"}
       });

如果没有看到 TopoJSON 文件，我无法确定这是否有效，但基本上您需要一个 topojson 方法来生成一个数组。

参见 choropleth map example举一个很好的例子:州被映射为一个路径 .mesh() 而县被映射为单独的对象，如上面的代码。