如何以編程方式在運行時向topojson文件添加屬性？

我想在運行時將其他屬性添加到topojson。我已經看過Choropleth的例子，但我不認爲有人操縱原始的json文件。如何以編程方式在運行時向topojson文件添加屬性？

什麼是做到這一點的最好方法是什麼？

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 }, ... ]

來源

2017-02-15 dmr07

我已經看過了等值線的例子，但我不認爲一個操縱原始的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>

來源

2017-02-17 02:44:57

如何以編程方式在運行時向topojson文件添加屬性？

回答

相關問題