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