TopoJSON中的 ‹‹properties›› 字段,如何用d3.js获取值?

3

我有一个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代码中使用属性的值("AREA","PERIMETER","region")。我尝试获取一些值,但没有成功:

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"}
})  

我做错了什么? < p > < em >更新:在 @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方法(请查看下面的注释)。

1个回答

5

你似乎正在制作一个大地图,而不是一系列代表国家的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方法来生成数组。

查看等值线地图示例可以作为一个很好的示例:州被映射成一个路径,并使用.mesh(),而县则像上面的代码一样被映射为单独的对象。


您的代码返回 TypeError: topojson.feature 不是一个函数。 - KoGor
但你说得没错,关键是在于一个大地图,它是通过svg.selectAll("path")实现的。我尝试了一下,它可以正常工作!(附言:无法在评论中处理代码列表,4个空格缩进不起作用,只会变成难以阅读的代码混乱 =( ) - KoGor
是的,但我不知道如何在这里正确地制作它。 - KoGor
1
您需要升级到TopoJSON客户端库的v1版本(topojson.v1.jstopojson.v1.min.js)。v1版本用topojson.feature替换了topojson.object;行为类似,但新的topojson.feature方法返回Feature或FeatureCollection(而不是Geometry或GeometryCollection),以更好地与GeoJSON兼容。 - mbostock

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接