런타임에 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":[ ... ] 
       } ... 
    } 

머징 배열이 같은 것을 볼 것이다 : 나는 Choropleth의 예를 검토 한

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

Answer 1

을하지만 난 생각하지 않는 하나 개를 조작 원래 json 파일.

아니요. 하지 않습니다, 당신이 볼 수 있듯이,

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

이러한 접근 : 당신이 링크 된 예에서, 마이크 Bostock은지도 ...

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

를 생성 ... 그리고 그 후 그는 그 맵을 사용합니다 세상을 바꿔라. 게다가, 그것은 더 빠르고 우아합니다.

그러나 topoJSON에 속성을 추가하려면 쉽게 할 수 있습니다.

첫째, 둥지 당신의 d3.json과 d3.csv (또는 데이터를 얻기 위해 사용하는 다른 기능) :

이

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

그런 다음, 두 개의 중첩 루프 속성을 추가 할 수 (없는 빠른 솔루션)를 사용합니다. 이 데모에서는 topoJSON을 하드 코딩하고 <pre>을 사용하여 Stack 스 니펫에서 실제 파일을 업로드 할 수 없기 때문에 CSV를로드합니다.

는 원래 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>

을