TopoJSON ‹‹ свойства ›› поле, как получить значения с помощью d3.js?

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"}},…

Я хочу использовать значения свойств ("AREA","PERIMETER","region") в моем коде d3.js. Я попытался получить некоторые значения, но это не сработало:

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 для хорошего примера: состояния отображаются как один путь с .mesh() в то время как округа отображаются как отдельные объекты, как в коде выше.