Как программно добавлять свойства в файл topojson во время выполнения?

Question

Я пытаюсь добавить дополнительные свойства в topojson во время выполнения. Я посмотрел на пример Choropleth, но я не думаю, что кто-то манипулирует исходным json-файлом.

Каков наилучший способ для этого?

JSON:

{ "type":"Topology", 
    "objects":{ 
     "countries":{ 
      "bbox":[ ... ], 
      "type":"GeometryCollection", 
      "geometries":[ 
       { 
       "type":"Polygon", 
       "properties":{ 
        "name":"Afghanistan", 
        "count": 30 // <------- Property I want to add. 
       }, 
       "id":"AFG", 
       "arcs":[ ... ] 
       }, 
       { 
       "type":"MultiPolygon", 
       "properties":{ 
        "name":"Angola", 
        "count": 50 // <------- Property I want to add. 
       }, 
       "id":"AGO", 
       "arcs":[ ... ] 
       } ... 
    } 

сливающихся массив будет выглядеть примерно так:

[{ "Angola" : 50 }, { "Afganistan" : 30 }, ... ]

Answer 1

Я смотрел на пример Choropleth, но я не думаю, что один манипулирует оригинальный json-файл.

Нет, он этого не делает. В примере, вы связаны, Майк Босток создает карту ...

var unemployment = d3.map(); 
unemployment.set(d.id, +d.rate); 

... и после того, как он использует эту карту:

.attr("fill", function(d) { return color(d.rate = unemployment.get(d.id)); }) 

Такой подход, как вы можете видеть, не измените topoJSON. Кроме того, это быстрее и элегантнее.

Однако, если вы хотите добавить свойства в topoJSON, это легко сделать.

Во-первых, гнездо вашего d3.json и ваш d3.csv (или любой другой функции вы используете, чтобы получить данные):

d3.csv("mycsv.csv", function(data) { 
    d3.json("mytopojson.json", function(json) { 
     //code here 
    }); 
}); 

Затем, используя два вложенных для петли, чтобы добавить свойства (не более быстрое решение). В этой демонстрации я жестко кодирую topoJSON и используя <pre> для загрузки CSV, потому что в фрагменте Stack я не могу загрузить реальные файлы.

Проверьте это, оригинальный topoJSON объект не имеет count свойства, но результат, показанный в console.log имеет:

var topoJSON = { 
 
    "type": "Topology", 
 
    "objects": { 
 
     "countries": { 
 
      "type": "GeometryCollection", 
 
      "geometries": [{ 
 
       "type": "Polygon", 
 
       "properties": { 
 
        "name": "Afghanistan" 
 
       }, 
 
       "id": "AFG" 
 
      }, { 
 
       "type": "MultiPolygon", 
 
       "properties": { 
 
        "name": "Angola" 
 
       }, 
 
       "id": "AGO", 
 
      }] 
 
     } 
 
    } 
 
}; 
 

 
var csv = d3.csvParse(d3.select("#csv").text()); 
 

 
var geometries = topoJSON.objects.countries.geometries; 
 

 
for (var i = 0; i < csv.length; i++) { 
 
    for (var j = 0; j < geometries.length; j++) { 
 
     if (csv[i].country == geometries[j].id) { 
 
      geometries[j].properties.count = csv[i].count; 
 
     } 
 
    } 
 
} 
 

 
console.log(topoJSON);

pre{ 
 
    display:none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">country,count 
 
AGO,50 
 
AFG,30</pre>