実行時に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の例で見てきたが、私は1つの操作しないと思う

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

Answer 1

をオリジナルのjsonファイル。

いいえ、彼はいません。ない、あなたが見ることができるよう、

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

そのアプローチ：あなたがリンクされている例では、マイク・ボストックは地図...

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

を作成し...その後、彼はそのマップを使用していますtopoJSONを変更してください。それだけでなく、それはより速く、よりエレガントです。

しかし、topoJSONにプロパティを追加する場合は、簡単に行うことができます。

まず、巣あなたd3.jsonとあなたのd3.csv（またはあなたがデータを取得するために使用するその他の機能）：

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

次に、プロパティ（速くないソリューション）を追加するには、ループのための2つの入れ子を使用します。このデモでは、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>