2017-09-13 100 views
0

因此,我使用D3.js的Topojson功能來創建svg世界地圖。儘管d3相對比較新,但我已經設法確定了目前的規模和一切。我遇到的問題是試圖合併或過濾來自topojson文件的數據與我已定義的一些集合。我將省略用於投影的功能。這是我到目前爲止有:如何合併數據從D3.js Topojson到定義的集合以設置類

var svg = d3.select("#map svg"); 
var regions = [ 
    { 
     region: 'low', 
     set: d3.set([ "USA", "CAN" ]) 
    }, 
    { 
     region: 'med', 
     set: d3.set([ "AUS" ]) 
    }, 
    { 
     region: 'high', 
     set: d3.set([ "RUS" ]) 
    } 
]; 
d3.json("site/js/topo.json", function(error, topology) { 
    // INDIVIDUAL COUNTRIES 
    svg.selectAll("path") 
     .data(topojson.feature(topology, topology.objects.worldByIso).features) 
     .enter() 
     .append("path") 
     .attr("data-iso", function(d){ 
      return d.properties.iso; 
     }) 
     .attr("d", path); 
}); 

我能夠從topojson文件返回d.properties.iso值數據屬性,但我真的很想做的是檢查ISO財產反對'地區'陣列,而是返回該地區(低,中,高),如果它匹配的設置。

理想情況下,解決方案不需要每次循環「區域」來檢查,以便可以快速處理。希望這一切都合情合理,我寫這篇文章是因爲我加班加點地跑出門來!

回答

0

Array.reduce

我想你想Array.reduce()。這會讓你將數組摺疊成單個值。我將d3.sets更改爲簡單的數組,因此我可以使用方法,但快速瀏覽d3文檔看起來像它們的集合具有has()

var regions = [{ 
 
    region: 'low', 
 
    set: ["USA", "CAN"] 
 
    }, 
 
    { 
 
    region: 'med', 
 
    set: ["AUS"] 
 
    }, 
 
    { 
 
    region: 'high', 
 
    set: ["RUS"] 
 
    } 
 
]; 
 

 
let getRegion = r => regions.reduce((a, c) => c.set.includes(r) ? c.region : a, null); 
 

 
console.log(getRegion('AUS')); 
 
console.log(getRegion('USA')); 
 
console.log(getRegion('EUR'));

相關問題