Question

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

{"type":"Topology","transform":{"scale":[0.03600360003702599,0.0040674580654071245],"translate":[-179.9999967702229,41.18684289776669],"objects":{"country":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0]],"properties":{"AREA":29809500,"PERIMETER":21822.4,"region":"XYZ"}},…

我想在我的d3.js代码中使用属性值（＆＃34; AREA＆＃34;，＆＃34; PERIMETER＆＃34;＆＃34; region＆＃34;）。我试图获得一些价值，但它没有起作用：

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

您似乎制作了一张大型地图，而不是一系列代表国家/地区的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()的路径，而县被映射为单个对象，如上面的代码。

TopoJSON << properties >>字段，如何用d3.js获取值？

1 个答案: