2017-09-13 79 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'));